/**
 * Portal Block — Design System & App Shell Styles.
 *
 * All colors derive from theme.json tokens (--wp--preset--color--*).
 * No hardcoded palette values.
 *
 * @package Acro_Manager
 */

/* ── 1. Token Bridge ──────────────────────────────────────────────────────── */
.acro-portal {
	/* Surface roles */
	--portal-bg:        var( --wp--preset--color--base,         #ffffff );
	--portal-surface:   var( --wp--preset--color--light,        #f5f5f5 );
	--portal-border:    var( --wp--preset--color--light-border, #e0e0e0 );

	/* Text roles */
	--portal-text:      var( --wp--preset--color--contrast,     #111111 );
	--portal-muted:     var( --wp--preset--color--muted,        #666666 );

	/* Brand roles */
	--portal-primary:   var( --wp--preset--color--primary,      #0b5d7a );
	--portal-accent:    var( --wp--preset--color--accent,       #f2a900 );
	--portal-rose:      var( --wp--preset--color--rose,         #ff3366 );
	--portal-dark:      var( --wp--preset--color--dark-navy,    #252d35 );

	/* Derived from brand */
	--portal-primary-on:  #ffffff;
	--portal-accent-on:   #252d35;

	/* Status badge tokens */
	--badge-pending-bg:    color-mix( in srgb, var( --portal-accent ) 15%, #fff );
	--badge-pending-text:  color-mix( in srgb, var( --portal-accent ) 70%, #000 );
	--badge-paid-bg:       color-mix( in srgb, var( --portal-primary ) 12%, #fff );
	--badge-paid-text:     color-mix( in srgb, var( --portal-primary ) 80%, #000 );
	--badge-overdue-bg:    color-mix( in srgb, var( --portal-rose ) 12%, #fff );
	--badge-overdue-text:  color-mix( in srgb, var( --portal-rose ) 80%, #000 );
	--badge-cancelled-bg:  var( --portal-surface );
	--badge-cancelled-text: var( --portal-muted );
	--badge-active-bg:     var( --badge-paid-bg );
	--badge-active-text:   var( --badge-paid-text );
	--badge-paused-bg:     var( --badge-pending-bg );
	--badge-paused-text:   var( --badge-pending-text );

	/* Chrome */
	--portal-top-bar-bg:      var( --portal-dark );
	--portal-top-bar-text:    #ffffff;
	--portal-top-bar-h:       56px;
	--portal-bottom-nav-bg:   var( --portal-bg );
	--portal-bottom-nav-h:    60px;

	/* Typography — theme presets */
	--portal-font:       var( --wp--preset--font-family--body, system-ui, -apple-system, sans-serif );
	--portal-fs-xs:      calc( var( --wp--preset--font-size--x-small,  11px ) * 0.9 );
	--portal-fs-sm:      calc( var( --wp--preset--font-size--small,    13px ) * 0.9 );
	--portal-fs-md:      calc( var( --wp--preset--font-size--medium,   15px ) * 0.9 );
	--portal-fs-lg:      calc( var( --wp--preset--font-size--large,    18px ) * 0.9 );
	--portal-fs-xl:      calc( var( --wp--preset--font-size--x-large,  22px ) * 0.9 );

	/* Spacing — theme presets */
	--sp-1: var( --wp--preset--spacing--10, 4px );
	--sp-2: var( --wp--preset--spacing--20, 8px );
	--sp-3: var( --wp--preset--spacing--30, 12px );
	--sp-4: var( --wp--preset--spacing--40, 16px );
	--sp-5: var( --wp--preset--spacing--50, 20px );
	--sp-6: var( --wp--preset--spacing--60, 24px );
	--sp-8: var( --wp--preset--spacing--80, 32px );

	/* Radius */
	--r-sm:  6px;
	--r-md:  10px;
	--r-lg:  14px;
	--r-xl:  20px;

	/* Elevation */
	--shadow-sm: 0 1px 3px rgba( 0, 0, 0, .08 ), 0 1px 2px rgba( 0, 0, 0, .06 );
	--shadow-md: 0 4px 12px rgba( 0, 0, 0, .10 );
	--shadow-lg: 0 10px 30px rgba( 0, 0, 0, .15 );

	/* Motion */
	--transition-fast:   150ms ease;
	--transition-normal: 220ms ease;

	font-family:      var( --portal-font );
	font-size:        var( --portal-fs-md );
	color:            var( --portal-text );
	background-color: var( --portal-bg );
	width:            100%;
	margin:           0;
}

.acro-portal,
.acro-portal *,
.acro-portal *::before,
.acro-portal *::after {
	box-sizing: border-box;
}

.acro-portal [hidden] {
	display: none !important;
}

/* ── 2. App Shell ─────────────────────────────────────────────────────────── */

.acro-portal__app {
	display:        flex;
	flex-direction: column;
	min-height:     100dvh;
	background:     var( --portal-surface );
	position:       relative;
}

/* Screens */
.acro-portal__screen {
	display: none;
	flex:    1;
	width:   100%;
}

.acro-portal__screen.is-active {
	display: flex;
	flex-direction: column;
}

/* ── 3. Top App Bar ───────────────────────────────────────────────────────── */

.acro-portal__topbar {
	display:          flex;
	align-items:      center;
	gap:              var( --sp-3 );
	height:           var( --portal-top-bar-h );
	padding:          0 var( --sp-4 );
	background-color: var( --portal-top-bar-bg );
	color:            var( --portal-top-bar-text );
	position:         sticky;
	top:              0;
	z-index:          100;
	flex-shrink:      0;
}

.acro-portal__topbar-title {
	flex:        1;
	font-size:   var( --portal-fs-lg );
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.acro-portal__topbar-action {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            34px;
	height:           34px;
	border:           0;
	background:       rgba( 255, 255, 255, .08 );
	color:            inherit;
	border-radius:    999px;
	cursor:           pointer;
	padding:          0;
	transition:       background var( --transition-fast ), transform var( --transition-fast );
}

.acro-portal__topbar-action:hover,
.acro-portal__topbar-action:focus-visible {
	background: rgba( 255, 255, 255, .2 );
	outline:    2px solid rgba( 255, 255, 255, .5 );
	outline-offset: 2px;
	transform: translateY( -1px );
}

.acro-portal__topbar-action--switch {
	background: rgba( 255, 255, 255, .08 );
}

.acro-portal__topbar-action--logout {
	background: rgba( 255, 111, 124, .18 );
}

.acro-portal__topbar-action--logout:hover,
.acro-portal__topbar-action--logout:focus-visible {
	background: rgba( 255, 111, 124, .3 );
}

/* ── 3b. Language Switch ─────────────────────────────────────────────────── */

.acro-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	border: 1px solid var( --portal-border );
	background: color-mix( in srgb, var( --portal-surface ) 92%, #fff );
	flex-shrink: 0;
}

.acro-portal__topbar .acro-lang-switch {
	border-color: rgba( 255, 255, 255, .3 );
	background: rgba( 255, 255, 255, .12 );
}

.acro-lang-switch__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	text-decoration: none;
	color: var( --portal-muted );
	transition: background var( --transition-fast ), color var( --transition-fast );
}

.acro-portal__topbar .acro-lang-switch__btn {
	color: rgba( 255, 255, 255, .88 );
}

.acro-lang-switch__btn:hover,
.acro-lang-switch__btn:focus-visible {
	background: color-mix( in srgb, var( --portal-primary ) 18%, #fff );
	color: var( --portal-primary );
	outline: none;
}

.acro-portal__topbar .acro-lang-switch__btn:hover,
.acro-portal__topbar .acro-lang-switch__btn:focus-visible {
	background: rgba( 255, 255, 255, .2 );
	color: #ffffff;
}

.acro-lang-switch__btn.is-active {
	background: var( --portal-primary );
	color: #ffffff;
}

.acro-portal__topbar .acro-lang-switch__btn.is-active {
	background: rgba( 255, 255, 255, .9 );
	color: var( --portal-dark );
}

/* ── 4. Scrollable Content Area ──────────────────────────────────────────── */

.acro-portal__content {
	flex:       1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding:    var( --sp-1 ) var( --sp-4 ) var( --sp-4 );
	padding-bottom: calc( var( --portal-bottom-nav-h ) + var( --sp-4 ) );
}

/* Variant: no bottom nav (login / onboarding) */
.acro-portal__content--no-nav {
	padding-bottom: var( --sp-4 );
}

/* ── 5. Bottom Navigation ────────────────────────────────────────────────── */

.acro-portal__bottom-nav {
	display:          flex;
	align-items:      stretch;
	height:           var( --portal-bottom-nav-h );
	background-color: var( --portal-bottom-nav-bg );
	border-top:       1px solid var( --portal-border );
	position:         fixed;
	bottom:           0;
	left:             0;
	right:            0;
	z-index:          100;
	padding-bottom:   env( safe-area-inset-bottom, 0px );
}

.acro-portal__bottom-nav-btn {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             2px;
	border:          0;
	background:      transparent;
	color:           var( --portal-muted );
	font-size:       var( --portal-fs-xs );
	cursor:          pointer;
	padding:         var( --sp-1 ) var( --sp-2 );
	min-height:      44px;
	transition:      color var( --transition-fast ), background var( --transition-fast );
	border-radius:   0;
	-webkit-tap-highlight-color: transparent;
}

.acro-portal__bottom-nav-btn:focus-visible {
	outline:        2px solid var( --portal-primary );
	outline-offset: -2px;
}

.acro-portal__bottom-nav-btn.is-active {
	color: var( --portal-primary );
}

.acro-portal__bottom-nav-btn .nav-icon {
	width:  22px;
	height: 22px;
	fill:   none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap:  round;
	stroke-linejoin: round;
}

.acro-portal__bottom-nav-btn .nav-label {
	font-weight: 500;
	line-height: 1;
}

/* ── 6. Cards ────────────────────────────────────────────────────────────── */

.acro-card {
	background:    var( --portal-bg );
	border-radius: var( --r-md );
	box-shadow:    var( --shadow-sm );
	overflow:      hidden;
}

.acro-card--surface {
	background: var( --portal-surface );
	box-shadow: none;
	border:     1px solid var( --portal-border );
}

.acro-card__header {
	display:     flex;
	align-items: center;
	justify-content: space-between;
	padding:     var( --sp-4 );
	border-bottom: 1px solid var( --portal-border );
}

.acro-card__title {
	font-size:   var( --portal-fs-md );
	font-weight: 600;
	color:       var( --portal-text );
	margin:      0;
}

.acro-card__body {
	padding: var( --sp-4 );
}

/* ── 7. List Rows ────────────────────────────────────────────────────────── */

.acro-list {
	list-style:    none;
	margin:        0;
	padding:       0;
	background:    var( --portal-bg );
	border-radius: var( --r-md );
	box-shadow:    var( --shadow-sm );
	overflow:      hidden;
}

.acro-list__item {
	display:         flex;
	align-items:     center;
	gap:             var( --sp-3 );
	padding:         var( --sp-3 ) var( --sp-4 );
	border-bottom:   1px solid var( --portal-border );
	min-height:      56px;
	cursor:          pointer;
	transition:      background var( --transition-fast );
}

.acro-list__item:last-child {
	border-bottom: 0;
}

.acro-list__item:hover,
.acro-list__item:focus-visible {
	background: var( --portal-surface );
	outline:    none;
}

.acro-list__item-main {
	flex:       1;
	min-width:  0;
}

.acro-list__item-start {
	flex-shrink: 0;
}

.acro-list__avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	object-fit: cover;
	border: 1px solid var( --portal-border );
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.acro-list__avatar--placeholder {
	background: color-mix( in srgb, var( --portal-primary ) 12%, #fff );
	color: var( --portal-primary );
	font-size: var( --portal-fs-sm );
	font-weight: 700;
}

.acro-list--plain {
	box-shadow: none;
	border: 1px solid var( --portal-border );
}

.acro-sheet-summary {
	margin-bottom: var( --sp-3 );
	padding: var( --sp-3 );
	background: var( --portal-surface );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-md );
}

.acro-sheet-summary__line {
	margin: 0;
	font-size: var( --portal-fs-sm );
	color: var( --portal-text );
	line-height: 1.45;
}

.acro-sheet-summary__line + .acro-sheet-summary__line {
	margin-top: 4px;
}

.acro-list__avatar--xl {
	width: 72px;
	height: 72px;
}

.acro-photo-editor-wrap {
	display: flex;
	align-items: center;
	gap: var( --sp-3 );
	margin-bottom: var( --sp-3 );
}

.acro-photo-editor {
	flex-shrink: 0;
}

.acro-photo-picker {
	position: relative;
	width: 100%;
}

.acro-photo-menu {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	z-index: 4;
	background: #fff;
	border: 1px solid var( --portal-border );
	border-radius: var( --r-md );
	box-shadow: var( --shadow-md );
	overflow: hidden;
}

.acro-photo-menu-btn {
	display: block;
	width: 100%;
	padding: 10px var( --sp-3 );
	text-align: left;
	border: 0;
	background: transparent;
	font: inherit;
	color: var( --portal-text );
	cursor: pointer;
}

.acro-photo-menu-btn + .acro-photo-menu-btn {
	border-top: 1px solid var( --portal-border );
}

.acro-photo-menu-btn:hover,
.acro-photo-menu-btn:focus-visible {
	background: var( --portal-surface );
	outline: none;
}

.acro-hidden-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.acro-inline-edit-list {
	display: grid;
	gap: var( --sp-2 );
	margin-bottom: var( --sp-3 );
}

.acro-inline-edit-list--grid {
	grid-template-columns: 1fr;
}

.acro-athlete-form-section {
	margin-bottom: var( --sp-4 );
}

.acro-athlete-form-section__header {
	margin-bottom: var( --sp-2 );
	font-size: var( --portal-fs-sm );
	font-weight: 700;
	color: var( --portal-text );
}

.acro-inline-edit {
	padding: var( --sp-2 ) var( --sp-3 );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-md );
	background: #fff;
}

.acro-inline-edit__label-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
}

.acro-help-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.acro-help-tip__btn {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	border: 1px solid var( --portal-border );
	background: var( --portal-surface );
	color: var( --portal-muted );
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.acro-help-tip__btn:hover,
.acro-help-tip__btn:focus-visible {
	color: var( --portal-primary );
	border-color: var( --portal-primary );
	outline: none;
}

.acro-help-tip__bubble {
	position: absolute;
	left: 50%;
	bottom: calc( 100% + 8px );
	transform: translateX( -50% ) translateY( 4px );
	min-width: 180px;
	max-width: 260px;
	padding: 8px 10px;
	border-radius: var( --r-sm );
	background: #1f2937;
	color: #fff;
	font-size: var( --portal-fs-xs );
	line-height: 1.35;
	box-shadow: 0 8px 22px rgba( 15, 23, 42, .3 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .14s ease, transform .14s ease;
	z-index: 20;
}

.acro-help-tip__bubble::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #1f2937 transparent transparent transparent;
}

.acro-help-tip:hover .acro-help-tip__bubble,
.acro-help-tip:focus-within .acro-help-tip__bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX( -50% ) translateY( 0 );
}

.acro-inline-edit__view {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-2 );
	min-height: 34px;
}

.acro-inline-edit__value {
	font-size: var( --portal-fs-sm );
	color: var( --portal-text );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.acro-inline-edit__btn {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var( --portal-border );
	border-radius: var( --r-sm );
	background: #fff;
	color: var( --portal-muted );
	cursor: pointer;
	flex-shrink: 0;
}

.acro-inline-edit__btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.acro-inline-edit__btn:hover,
.acro-inline-edit__btn:focus-visible {
	border-color: var( --portal-primary );
	color: var( --portal-primary );
	outline: none;
}

.acro-log-accordion-list {
	display: grid;
	gap: var( --sp-3 );
	margin-bottom: var( --sp-3 );
}

.acro-log-accordion {
	border: 1px solid var( --portal-border );
	border-radius: var( --r-md );
	background: #fff;
	overflow: hidden;
}

.acro-log-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-2 );
	padding: 10px var( --sp-3 );
	list-style: none;
	cursor: pointer;
	background: var( --portal-surface );
	border-bottom: 1px solid transparent;
}

.acro-log-accordion__summary::-webkit-details-marker {
	display: none;
}

.acro-log-accordion[open] .acro-log-accordion__summary {
	border-bottom-color: var( --portal-border );
}

.acro-log-accordion__title {
	font-size: var( --portal-fs-sm );
	font-weight: 700;
	color: var( --portal-text );
}

.acro-log-accordion__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var( --portal-border );
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	color: var( --portal-muted );
}

.acro-log-accordion__body {
	padding: var( --sp-3 );
}

.acro-log-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var( --sp-2 );
}

.acro-log-item {
	padding: var( --sp-2 ) var( --sp-3 );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-sm );
	background: var( --portal-bg );
}

.acro-log-item__line {
	margin: 0;
	font-size: var( --portal-fs-sm );
	line-height: 1.4;
	color: var( --portal-text );
}

.acro-log-item__line + .acro-log-item__line {
	margin-top: 4px;
}

.acro-log-empty {
	margin: 0;
	font-size: var( --portal-fs-sm );
	color: var( --portal-muted );
}

.acro-link {
	color: var( --portal-primary );
	text-decoration: underline;
	text-underline-offset: 2px;
}

.acro-list__item-title {
	font-size:     var( --portal-fs-md );
	font-weight:   500;
	color:         var( --portal-text );
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.acro-list__item-meta {
	font-size:  var( --portal-fs-sm );
	color:      var( --portal-muted );
	margin-top: 2px;
}

.acro-list__item-end {
	display:         flex;
	flex-direction:  column;
	align-items:     flex-end;
	gap:             4px;
	flex-shrink:     0;
}

/* ── 8. Status Badges ────────────────────────────────────────────────────── */

.acro-badge {
	display:        inline-flex;
	align-items:    center;
	padding:        2px var( --sp-2 );
	border-radius:  var( --r-sm );
	font-size:      var( --portal-fs-xs );
	font-weight:    600;
	letter-spacing: .3px;
	white-space:    nowrap;
}

.acro-badge--pending {
	background: var( --badge-pending-bg );
	color:      var( --badge-pending-text );
}

.acro-badge--paid,
.acro-badge--active {
	background: var( --badge-paid-bg );
	color:      var( --badge-paid-text );
}

.acro-badge--overdue {
	background: var( --badge-overdue-bg );
	color:      var( --badge-overdue-text );
}

.acro-badge--cancelled {
	background: var( --badge-cancelled-bg );
	color:      var( --badge-cancelled-text );
}

.acro-badge--paused {
	background: var( --badge-paused-bg );
	color:      var( --badge-paused-text );
}

/* ── 9. Filter Chips ─────────────────────────────────────────────────────── */

.acro-chips {
	display:     flex;
	gap:         var( --sp-2 );
	overflow-x:  auto;
	padding:     var( --sp-2 ) 0;
	-ms-overflow-style:  none;
	scrollbar-width:     none;
}

.acro-chips::-webkit-scrollbar {
	display: none;
}

.acro-chip {
	display:       inline-flex;
	align-items:   center;
	padding:       6px var( --sp-3 );
	border:        1.5px solid var( --portal-border );
	border-radius: 9999px;
	font-size:     var( --portal-fs-sm );
	font-weight:   500;
	background:    var( --portal-bg );
	color:         var( --portal-muted );
	cursor:        pointer;
	white-space:   nowrap;
	flex-shrink:   0;
	transition:    border-color var( --transition-fast ),
	               color var( --transition-fast ),
	               background var( --transition-fast );
	-webkit-tap-highlight-color: transparent;
}

.acro-chip.is-active,
.acro-chip:focus-visible {
	border-color: var( --portal-primary );
	color:        var( --portal-primary );
	background:   color-mix( in srgb, var( --portal-primary ) 8%, #fff );
	outline:      none;
}

/* ── 10. Search Bar ──────────────────────────────────────────────────────── */

.acro-search {
	display:          flex;
	align-items:      center;
	gap:              var( --sp-2 );
	background:       var( --portal-surface );
	border:           1.5px solid var( --portal-border );
	border-radius:    var( --r-md );
	padding:          0 var( --sp-3 );
	height:           44px;
	width:            100%;
}

.acro-search__icon {
	flex-shrink: 0;
	width:       18px;
	height:      18px;
	color:       var( --portal-muted );
}

.acro-search__input {
	flex:       1;
	border:     0;
	background: transparent;
	font-size:  var( --portal-fs-md );
	color:      var( --portal-text );
	outline:    none;
}

.acro-search__input::placeholder {
	color: var( --portal-muted );
}

/* ── 11. Buttons ─────────────────────────────────────────────────────────── */

.acro-btn {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              var( --sp-2 );
	border:           1.5px solid transparent;
	border-radius:    var( --r-md );
	font-family:      var( --portal-font );
	font-size:        var( --portal-fs-md );
	font-weight:      600;
	height:           48px;
	padding:          0 var( --sp-5 );
	cursor:           pointer;
	text-decoration:  none;
	transition:       background var( --transition-fast ),
	                  border-color var( --transition-fast ),
	                  opacity var( --transition-fast );
	-webkit-tap-highlight-color: transparent;
}

.acro-btn:focus-visible {
	outline: 3px solid color-mix( in srgb, var( --portal-primary ) 40%, transparent );
	outline-offset: 2px;
}

.acro-btn--primary {
	background:   var( --portal-primary );
	border-color: var( --portal-primary );
	color:        var( --portal-primary-on );
}

.acro-btn--primary:hover {
	background:   color-mix( in srgb, var( --portal-primary ) 85%, #000 );
	border-color: color-mix( in srgb, var( --portal-primary ) 85%, #000 );
}

.acro-btn--outline {
	background:   transparent;
	border-color: var( --portal-primary );
	color:        var( --portal-primary );
}

.acro-btn--outline:hover {
	background: color-mix( in srgb, var( --portal-primary ) 8%, transparent );
}

.acro-btn--ghost {
	background:   transparent;
	border-color: transparent;
	color:        var( --portal-primary );
}

.acro-btn--full {
	width: 100%;
}

.acro-btn--sm {
	height:    38px;
	font-size: var( --portal-fs-sm );
	padding:   0 var( --sp-4 );
}

.acro-btn--xs {
	height:    32px;
	font-size: var( --portal-fs-sm );
	padding:   0 var( --sp-3 );
	border-radius: var( --r-sm );
}

.acro-btn--status {
	width: 100%;
	border-color: transparent;
	color: #ffffff;
}

.acro-btn--status-pending {
	background: color-mix( in srgb, var( --portal-accent ) 72%, #111 );
}

.acro-btn--status-paid {
	background: color-mix( in srgb, var( --portal-primary ) 78%, #0a2f3a );
}

.acro-btn--status-overdue {
	background: color-mix( in srgb, var( --portal-rose ) 78%, #3a1118 );
}

.acro-btn--status-cancelled {
	background: color-mix( in srgb, var( --portal-muted ) 72%, #2b2b2b );
}

.acro-btn--status:hover {
	opacity: .92;
}

.acro-btn[disabled],
.acro-btn[aria-disabled="true"] {
	opacity: .5;
	cursor:  not-allowed;
}

/* ── 12. Form Fields ─────────────────────────────────────────────────────── */

.acro-field {
	display:        flex;
	flex-direction: column;
	gap:            var( --sp-1 );
}

.acro-field__label {
	font-size:   var( --portal-fs-sm );
	font-weight: 500;
	color:       var( --portal-text );
}

.acro-field__input,
.acro-field__select,
.acro-field__textarea {
	width:         100%;
	height:        48px;
	padding:       0 var( --sp-4 );
	border:        1.5px solid var( --portal-border );
	border-radius: var( --r-md );
	font-family:   var( --portal-font );
	font-size:     var( --portal-fs-md );
	color:         var( --portal-text );
	background:    var( --portal-bg );
	appearance:    none;
	transition:    border-color var( --transition-fast );
	outline:       none;
}

.acro-field__textarea {
	height:      auto;
	min-height:  88px;
	padding:     var( --sp-3 ) var( --sp-4 );
	resize:      vertical;
}

.acro-field__input:focus,
.acro-field__select:focus,
.acro-field__textarea:focus {
	border-color: var( --portal-primary );
}

.acro-field__input[aria-invalid="true"],
.acro-field__select[aria-invalid="true"] {
	border-color: var( --portal-rose );
}

.acro-field__error {
	font-size: var( --portal-fs-sm );
	color:     var( --portal-rose );
}

/* ── 13. Alert/Toast ─────────────────────────────────────────────────────── */

.acro-alert {
	padding:       var( --sp-3 ) var( --sp-4 );
	border-radius: var( --r-md );
	font-size:     var( --portal-fs-sm );
	font-weight:   500;
	line-height:   1.4;
}

.acro-alert--error {
	background: var( --badge-overdue-bg );
	color:      var( --badge-overdue-text );
	border:     1px solid color-mix( in srgb, var( --portal-rose ) 30%, transparent );
}

.acro-alert--success {
	background: var( --badge-paid-bg );
	color:      var( --badge-paid-text );
	border:     1px solid color-mix( in srgb, var( --portal-primary ) 25%, transparent );
}

.acro-alert--info {
	background:   color-mix( in srgb, var( --portal-accent ) 12%, #fff );
	color:        var( --badge-pending-text );
	border:       1px solid color-mix( in srgb, var( --portal-accent ) 25%, transparent );
}

.acro-alert--warning {
	background: color-mix( in srgb, var( --portal-accent ) 18%, #fff7cf );
	color: color-mix( in srgb, var( --portal-accent ) 78%, #4a3410 );
	border: 1px solid color-mix( in srgb, var( --portal-accent ) 38%, transparent );
}

/* ── 14. KPI Strip ───────────────────────────────────────────────────────── */

.acro-kpi-strip {
	display:   grid;
	gap:       var( --sp-3 );
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
}

.acro-kpi-strip--compact {
	gap: var( --sp-2 );
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

.acro-kpi-strip--compact .acro-kpi {
	padding: var( --sp-3 );
}

.acro-kpi-strip--compact .acro-kpi__label {
	font-size: 10px;
}

.acro-kpi-strip--compact .acro-kpi__value {
	font-size: var( --portal-fs-lg );
}

.acro-kpi-strip--dashboard {
	grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr ) );
}

.acro-dashboard-kpi-scroll {
	display: grid;
	gap: var( --sp-3 );
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
}

.acro-dashboard-head {
	display: flex;
	flex-direction: column;
	gap: var( --sp-2 );
	margin: 0 0 var( --sp-3 );
}

.acro-portal [data-tab-panel="dashboard"] > .acro-section-header {
	padding-top: var( --sp-1 );
}

.acro-dashboard-range {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var( --portal-border );
	border-radius: 999px;
	background: var( --portal-bg );
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.acro-dashboard-range::-webkit-scrollbar {
	display: none;
}

.acro-dashboard-range-btn {
	appearance: none;
	border: 0;
	background: transparent;
	border-radius: 999px;
	padding: 6px 10px;
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	letter-spacing: .35px;
	color: var( --portal-muted );
	white-space: nowrap;
	cursor: pointer;
}

.acro-dashboard-range-btn.is-active {
	background: var( --portal-primary );
	color: #ffffff;
}

.acro-dashboard-period {
	margin: 0;
	font-size: var( --portal-fs-sm );
	font-weight: 600;
	color: var( --portal-muted );
}

.acro-dashboard-kpi {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 126px;
	padding: var( --sp-3 );
	border-radius: var( --r-lg );
	border-top: 3px solid var( --portal-primary );
	background: var( --portal-bg );
	box-shadow: var( --shadow-sm );
}

.acro-dashboard-kpi--success {
	border-top-color: color-mix( in srgb, var( --portal-primary ) 65%, #1a8f52 );
}

.acro-dashboard-kpi--warning {
	border-top-color: color-mix( in srgb, var( --portal-accent ) 78%, #8a6500 );
}

.acro-dashboard-kpi--muted {
	border-top-color: var( --portal-muted );
}

.acro-dashboard-kpi--info {
	border-top-color: color-mix( in srgb, var( --portal-primary ) 56%, var( --portal-accent ) );
}

.acro-dashboard-kpi__label {
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .45px;
	color: var( --portal-muted );
	line-height: 1.2;
}

.acro-dashboard-kpi__value {
	font-size: var( --portal-fs-xl );
	font-weight: 700;
	line-height: 1.15;
	margin-top: var( --sp-2 );
	color: var( --portal-text );
}

.acro-dashboard-kpi__value--method {
	font-size: var( --portal-fs-md );
	line-height: 1.25;
}

.acro-dashboard-kpi__sub {
	font-size: var( --portal-fs-xs );
	color: var( --portal-muted );
	margin-top: var( --sp-1 );
}

.acro-dashboard-status-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --sp-2 );
}

.acro-dashboard-status {
	padding: var( --sp-2 ) var( --sp-3 );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-md );
	background: var( --portal-surface );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-3 );
	font-size: var( --portal-fs-sm );
	color: var( --portal-muted );
}

.acro-dashboard-status strong {
	font-size: var( --portal-fs-md );
	color: var( --portal-text );
}

.acro-dashboard-chart-wrap {
	display: flex;
	flex-direction: column;
	gap: var( --sp-3 );
}

.acro-dashboard-chart-row {
	display: grid;
	grid-template-columns: 78px 1fr 28px;
	align-items: center;
	gap: var( --sp-2 );
}

.acro-dashboard-chart-label {
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	text-transform: uppercase;
	color: var( --portal-muted );
}

.acro-dashboard-chart-bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.acro-dashboard-chart-bar {
	height: 20px;
	border-radius: 999px;
	padding: 0 var( --sp-2 );
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 18%;
}

.acro-dashboard-chart-bar--billed {
	background: color-mix( in srgb, var( --portal-primary ) 16%, #fff );
	color: color-mix( in srgb, var( --portal-primary ) 72%, #000 );
}

.acro-dashboard-chart-bar--paid {
	background: color-mix( in srgb, var( --portal-primary ) 10%, #e9fff2 );
	color: #1a7a4a;
}

.acro-dashboard-chart-count {
	font-size: var( --portal-fs-xs );
	font-weight: 700;
	color: var( --portal-muted );
	text-align: right;
}

.acro-kpi {
	background:    var( --portal-bg );
	border-radius: var( --r-md );
	padding:       var( --sp-4 );
	box-shadow:    var( --shadow-sm );
}

.acro-kpi__label {
	font-size:  var( --portal-fs-xs );
	color:      var( --portal-muted );
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
}

.acro-kpi__value {
	font-size:   var( --portal-fs-xl );
	font-weight: 700;
	color:       var( --portal-text );
	margin-top:  var( --sp-1 );
	line-height: 1.1;
}

.acro-kpi__sub {
	font-size:  var( --portal-fs-xs );
	color:      var( --portal-muted );
	margin-top: 4px;
}

.acro-kpi__value--method {
	font-size: var( --portal-fs-md );
	line-height: 1.25;
}

/* ── 15. Section Header ──────────────────────────────────────────────────── */

.acro-section-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         var( --sp-2 ) 0 var( --sp-2 );
}

.acro-section-title {
	font-size:   var( --portal-fs-lg );
	font-weight: 700;
	color:       var( --portal-text );
	margin:      0;
}

/* ── 16. Empty + Loading States ──────────────────────────────────────────── */

.acro-empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         var( --sp-8 ) var( --sp-4 );
	text-align:      center;
	gap:             var( --sp-3 );
}

.acro-empty__icon {
	width:   48px;
	height:  48px;
	color:   var( --portal-muted );
	opacity: .5;
}

.acro-empty__title {
	font-size:   var( --portal-fs-md );
	font-weight: 600;
	color:       var( --portal-text );
	margin:      0;
}

.acro-empty__text {
	font-size: var( --portal-fs-sm );
	color:     var( --portal-muted );
	margin:    0;
}

.acro-skeleton {
	background:    var( --portal-border );
	border-radius: var( --r-sm );
	animation:     acro-pulse 1.4s ease-in-out infinite;
}

@keyframes acro-pulse {
	0%, 100% { opacity: 1;   }
	50%       { opacity: .4; }
}

/* ── 17. Bottom Sheet ────────────────────────────────────────────────────── */

.acro-sheet-backdrop {
	position:   fixed;
	inset:      0;
	background: rgba( 0, 0, 0, .45 );
	z-index:    200;
	animation:  acro-fade-in var( --transition-normal ) ease;
}

@keyframes acro-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.acro-sheet {
	position:         fixed;
	bottom:           0;
	left:             0;
	right:            0;
	z-index:          201;
	background:       var( --portal-bg );
	border-radius:    var( --r-xl ) var( --r-xl ) 0 0;
	padding:          var( --sp-2 ) var( --sp-4 ) calc( var( --sp-4 ) + env( safe-area-inset-bottom, 0px ) );
	max-height:       90dvh;
	overflow-y:       auto;
	animation:        acro-slide-up var( --transition-normal ) ease;
}

@keyframes acro-slide-up {
	from { transform: translateY( 100% ); }
	to   { transform: translateY( 0 ); }
}

.acro-sheet__handle {
	width:         40px;
	height:        4px;
	background:    var( --portal-border );
	border-radius: 9999px;
	margin:        0 auto var( --sp-4 );
}

.acro-sheet__title {
	font-size:    var( --portal-fs-lg );
	font-weight:  700;
	color:        var( --portal-text );
	margin:       0 0 var( --sp-4 );
}

.acro-sheet__footer {
	display:         flex;
	gap:             var( --sp-3 );
	padding-top:     var( --sp-4 );
	border-top:      1px solid var( --portal-border );
	margin-top:      var( --sp-4 );
	position:        sticky;
	bottom:          0;
	background:      var( --portal-bg );
}

.acro-sheet-meta-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --sp-3 );
	margin-bottom: var( --sp-4 );
}

.acro-sheet-meta-grid--compact {
	margin-bottom: 0;
	gap: var( --sp-2 );
}

.acro-sheet-meta-label {
	font-size: var( --portal-fs-xs );
	color: var( --portal-muted );
	text-transform: uppercase;
	letter-spacing: .35px;
	font-weight: 600;
	margin-bottom: 2px;
}

.acro-sheet-meta-value {
	font-size: var( --portal-fs-sm );
	color: var( --portal-text );
	font-weight: 500;
	word-break: break-word;
}

.acro-sheet-items-header {
	font-size: var( --portal-fs-sm );
	font-weight: 700;
	color: var( --portal-text );
	margin: var( --sp-2 ) 0;
}

.acro-sheet-line-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-3 );
	padding: var( --sp-2 ) 0;
	border-bottom: 1px dashed var( --portal-border );
}

.acro-sheet-line-item:last-of-type {
	border-bottom: 0;
}

.acro-sheet-line-desc {
	font-size: var( --portal-fs-sm );
	color: var( --portal-text );
	min-width: 0;
}

.acro-sheet-line-discount {
	display: block;
	margin-top: 2px;
	font-size: var( --portal-fs-xs );
	color: color-mix( in srgb, var( --portal-accent ) 75%, #000 );
	font-weight: 600;
}

.acro-sheet-line-amount {
	font-size: var( --portal-fs-sm );
	font-weight: 700;
	color: var( --portal-text );
	white-space: nowrap;
	flex-shrink: 0;
}

.acro-sheet-total {
	display: flex;
	justify-content: flex-end;
	gap: var( --sp-2 );
	padding-top: var( --sp-3 );
	margin-top: var( --sp-2 );
	border-top: 1px solid var( --portal-border );
	font-size: var( --portal-fs-md );
	color: var( --portal-text );
}

.acro-sheet-total-breakdown {
	margin-top: var( --sp-3 );
	padding-top: var( --sp-2 );
	border-top: 1px solid var( --portal-border );
}

.acro-sheet-total-row {
	display: flex;
	justify-content: space-between;
	gap: var( --sp-3 );
	font-size: var( --portal-fs-sm );
	color: var( --portal-text );
	padding: 2px 0;
}

.acro-sheet-total-row--discount {
	color: color-mix( in srgb, var( --portal-accent ) 74%, #000 );
}

.acro-sheet-rule-note {
	margin: 6px 0 0;
	font-size: var( --portal-fs-xs );
	color: var( --portal-muted );
}

.acro-sheet-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --sp-2 );
	margin-top: var( --sp-3 );
}

.acro-sheet-actions .acro-btn {
	flex: 1 1 100%;
	width: 100%;
}

.acro-ui-root {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 500;
}

.acro-toast {
	position: fixed;
	left: 50%;
	bottom: calc( var( --portal-bottom-nav-h ) + var( --sp-4 ) );
	transform: translateX( -50% );
	padding: var( --sp-2 ) var( --sp-4 );
	border-radius: 999px;
	font-size: var( --portal-fs-sm );
	font-weight: 600;
	box-shadow: var( --shadow-md );
	pointer-events: auto;
	animation: acro-fade-in var( --transition-fast ) ease;
	max-width: calc( 100vw - 24px );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.acro-toast--success {
	background: var( --badge-paid-bg );
	color: var( --badge-paid-text );
}

.acro-toast--error {
	background: var( --badge-overdue-bg );
	color: var( --badge-overdue-text );
}

.acro-toast--info {
	background: var( --portal-dark );
	color: #ffffff;
}

.acro-toast.is-leaving {
	opacity: 0;
	transform: translateX( -50% ) translateY( 6px );
	transition: opacity var( --transition-fast ), transform var( --transition-fast );
}

.acro-confirm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .45 );
	pointer-events: auto;
}

.acro-confirm {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: min( 420px, calc( 100vw - 24px ) );
	background: var( --portal-bg );
	border-radius: var( --r-lg );
	box-shadow: var( --shadow-lg );
	padding: var( --sp-4 );
	pointer-events: auto;
}

.acro-confirm__title {
	margin: 0;
	font-size: var( --portal-fs-lg );
	font-weight: 700;
	color: var( --portal-text );
}

.acro-confirm__text {
	margin: var( --sp-2 ) 0 0;
	font-size: var( --portal-fs-sm );
	color: var( --portal-muted );
	line-height: 1.4;
}

.acro-confirm__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --sp-2 );
	margin-top: var( --sp-4 );
}

.acro-busy-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 255, 255, 255, .82 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var( --sp-2 );
	z-index: 2;
	border-radius: inherit;
}

.acro-busy-spinner {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 3px solid color-mix( in srgb, var( --portal-primary ) 28%, #fff );
	border-top-color: var( --portal-primary );
	animation: acro-spin .8s linear infinite;
}

.acro-busy-text {
	font-size: var( --portal-fs-sm );
	font-weight: 600;
	color: var( --portal-primary );
}

@keyframes acro-spin {
	from { transform: rotate( 0deg ); }
	to { transform: rotate( 360deg ); }
}

/* ── 18. Stepper (Onboarding) ────────────────────────────────────────────── */

.acro-stepper {
	display:     flex;
	align-items: center;
	gap:         0;
	padding:     var( --sp-4 ) 0;
}

.acro-stepper__step {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	flex:            1;
	gap:             var( --sp-1 );
	position:        relative;
}

.acro-stepper__step + .acro-stepper__step::before {
	content:    '';
	position:   absolute;
	top:        16px;
	right:      50%;
	left:       -50%;
	height:     2px;
	background: var( --portal-border );
}

.acro-stepper__dot {
	width:           32px;
	height:          32px;
	border-radius:   50%;
	background:      var( --portal-border );
	color:           var( --portal-muted );
	font-size:       var( --portal-fs-sm );
	font-weight:     700;
	display:         flex;
	align-items:     center;
	justify-content: center;
	position:        relative;
	z-index:         1;
	transition:      background var( --transition-fast ),
	                 color var( --transition-fast );
}

.acro-stepper__step--active .acro-stepper__dot {
	background: var( --portal-primary );
	color:      var( --portal-primary-on );
}

.acro-stepper__step--done .acro-stepper__dot {
	background: color-mix( in srgb, var( --portal-primary ) 25%, #fff );
	color:      var( --portal-primary );
}

.acro-stepper__label {
	font-size:  var( --portal-fs-xs );
	color:      var( --portal-muted );
	text-align: center;
	white-space: nowrap;
}

.acro-stepper__step--active .acro-stepper__label {
	color:       var( --portal-primary );
	font-weight: 600;
}

/* ── 18b. Onboarding Forms ─────────────────────────────────────────────── */

.acro-onboarding {
	display: flex;
	flex-direction: column;
	gap: var( --sp-3 );
}

.acro-onboarding__pane {
	display: block;
}

.acro-onboarding__section {
	display: flex;
	flex-direction: column;
	gap: var( --sp-3 );
	padding: var( --sp-3 );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-md );
	background: color-mix( in srgb, var( --portal-surface ) 72%, #fff );
	margin-bottom: var( --sp-3 );
}

.acro-onboarding__section-title {
	margin: 0;
	font-size: var( --portal-fs-sm );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .35px;
	color: var( --portal-muted );
}

.acro-onboarding__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --sp-3 );
	margin-top: var( --sp-3 );
}

.acro-onboarding__grid--2 {
	grid-template-columns: 1fr;
}

.acro-onboarding__existing .acro-btn {
	margin-top: var( --sp-1 );
}

.acro-onboarding__hint {
	font-size: var( --portal-fs-xs );
	color: var( --portal-muted );
	min-height: 16px;
}

.acro-onboarding__hint.is-success {
	color: var( --badge-paid-text );
}

.acro-onboarding__hint.is-error {
	color: var( --badge-overdue-text );
}

.acro-onboarding__hint.is-info {
	color: var( --portal-primary );
}

.acro-onboarding__required {
	color: var( --badge-overdue-text );
	font-weight: 700;
}

.acro-onboarding-athletes {
	display: grid;
	gap: var( --sp-3 );
	margin-bottom: var( --sp-3 );
}

.acro-onboarding-athlete__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var( --sp-3 );
}

.acro-onboarding-athlete__head strong {
	font-size: var( --portal-fs-md );
}

.acro-onboarding-review {
	display: grid;
	gap: var( --sp-2 );
	margin-top: var( --sp-3 );
	margin-bottom: var( --sp-3 );
}

.acro-onboarding-review__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-3 );
	padding: var( --sp-2 ) var( --sp-3 );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-sm );
	background: color-mix( in srgb, var( --portal-surface ) 70%, #fff );
}

.acro-onboarding-total {
	margin-top: var( --sp-3 );
	padding: var( --sp-3 );
	border: 1px solid var( --portal-border );
	border-radius: var( --r-sm );
	background: color-mix( in srgb, var( --portal-surface ) 74%, #fff );
}

.acro-onboarding-total__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --sp-3 );
	padding: 6px 0;
	font-size: var( --portal-fs-sm );
}

.acro-onboarding-total__row.is-discount {
	color: var( --badge-paid-text );
}

.acro-onboarding-total__row.is-final {
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var( --portal-border );
	font-weight: 700;
}

.acro-onboarding-total__renewal {
	margin: var( --sp-2 ) 0 0;
	font-size: var( --portal-fs-xs );
	color: var( --portal-muted );
}

@media ( min-width: 640px ) {
	.acro-onboarding__grid--2 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ── 19. Portal Choice Cards ─────────────────────────────────────────────── */

.acro-portal-choice {
	display:        flex;
	flex-direction: column;
	gap:            var( --sp-4 );
	padding:        var( --sp-6 ) 0;
}

.acro-portal-choice__card {
	display:          flex;
	align-items:      center;
	gap:              var( --sp-4 );
	padding:          var( --sp-5 );
	background:       var( --portal-bg );
	border:           2px solid var( --portal-border );
	border-radius:    var( --r-lg );
	cursor:           pointer;
	transition:       border-color var( --transition-fast ),
	                  box-shadow var( --transition-fast );
	-webkit-tap-highlight-color: transparent;
	width:            100%;
	text-align:       left;
	font-family:      var( --portal-font );
}

.acro-portal-choice__card:hover,
.acro-portal-choice__card:focus-visible {
	border-color: var( --portal-primary );
	box-shadow:   var( --shadow-md );
	outline:      none;
}

.acro-portal-choice__icon {
	width:            48px;
	height:           48px;
	border-radius:    var( --r-md );
	background:       color-mix( in srgb, var( --portal-primary ) 10%, #fff );
	color:            var( --portal-primary );
	display:          flex;
	align-items:      center;
	justify-content:  center;
	flex-shrink:      0;
}

.acro-portal-choice__title {
	font-size:   var( --portal-fs-lg );
	font-weight: 700;
	color:       var( --portal-text );
	margin:      0 0 2px;
}

.acro-portal-choice__desc {
	font-size: var( --portal-fs-sm );
	color:     var( --portal-muted );
	margin:    0;
}

/* ── 20. Responsive: tablet+ ─────────────────────────────────────────────── */

@media ( min-width: 768px ) {
	.acro-portal__content {
		max-width: 680px;
		margin:    0 auto;
		padding:   var( --sp-6 );
		padding-bottom: calc( var( --portal-bottom-nav-h ) + var( --sp-6 ) );
	}

	.acro-kpi-strip {
		grid-template-columns: repeat( 4, 1fr );
	}

	.acro-kpi-strip--dashboard {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.acro-kpi-strip--compact {
		grid-template-columns: repeat( 3, minmax( 110px, 1fr ) );
	}

	.acro-portal__bottom-nav {
		max-width: 680px;
		left:      50%;
		right:     auto;
		transform: translateX( -50% );
		border-radius: var( --r-xl ) var( --r-xl ) 0 0;
		border-left:   1px solid var( --portal-border );
		border-right:  1px solid var( --portal-border );
	}

	.acro-sheet-meta-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ── 21. Login Screen Shell ──────────────────────────────────────────────── */

.acro-login {
	display:         flex;
	flex-direction:  column;
	min-height:      100dvh;
	background:      var( --portal-bg );
	padding:         var( --sp-4 ) var( --sp-4 );
	gap:             var( --sp-4 );
}

.acro-login__brand {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             var( --sp-3 );
	padding-top:     var( --sp-4 );
	text-align:      center;
}

.acro-login__avatar {
	width:          72px;
	height:         72px;
	border-radius:  50%;
	display:        flex;
	align-items:    center;
	justify-content: center;
	background:     var( --portal-primary );
	color:          var( --portal-primary-on );
}

.acro-login__logo {
	display:    flex;
	align-items: center;
	justify-content: center;
}

.acro-login__logo-img {
	max-width:  160px;
	max-height: 80px;
	width:      auto;
	height:     auto;
	object-fit: contain;
}

.acro-login__title {
	font-size:   var( --portal-fs-xl );
	font-weight: 700;
	color:       var( --portal-text );
	margin:      0;
}

@media ( max-width: 420px ) {
	.acro-kpi-strip--compact .acro-kpi {
		padding: var( --sp-2 );
	}

	.acro-kpi-strip--compact .acro-kpi__value {
		font-size: var( --portal-fs-md );
	}

	.acro-dashboard-kpi {
		padding: var( --sp-2 );
		min-height: 108px;
	}

	.acro-dashboard-kpi__value {
		font-size: var( --portal-fs-lg );
	}

	.acro-dashboard-chart-row {
		grid-template-columns: 64px 1fr 24px;
	}

	.acro-sheet-meta-grid {
		grid-template-columns: 1fr;
	}
}

.acro-login__subtitle {
	font-size: var( --portal-fs-md );
	color:     var( --portal-muted );
	margin:    0;
}

.acro-login__form {
	display:        flex;
	flex-direction: column;
	gap:            var( --sp-4 );
}

.acro-login__forgot {
	margin: 0;
	text-align: right;
	font-size: var( --portal-fs-sm );
}

.acro-login__forgot-link {
	color: var( --portal-primary );
	text-decoration: none;
	font-weight: 600;
}

.acro-login__forgot-link:hover,
.acro-login__forgot-link:focus-visible {
	text-decoration: underline;
	outline: none;
}

.acro-login__form [data-role="login-reset-notice"] {
	margin-top: calc( var( --sp-4 ) * -0.5 );
}

.acro-login__actions {
	display:        flex;
	flex-direction: column;
	gap:            var( --sp-3 );
}

/* ── Print: hide portal completely ───────────────────────────────────────── */
@media print {
	.acro-portal { display: none; }
}