/* =============================================================================
	 Base, reset, typography, layout shell, utility classes
	 Depends on: tokens.css
	 ============================================================================= */

.shiftora-wrap *,
.shiftora-wrap *::before,
.shiftora-wrap *::after {
	box-sizing: border-box;
}

[x-cloak] {
	display: none !important;
}

/* ── Plugin wrapper ──────────────────────────────────────────────────────────── */
.shiftora-wrap {
	font-family:             var(--shiftora-font-family-sans);
	font-size:               var(--shiftora-font-size-base);
	line-height:             var(--shiftora-line-height-normal);
	color:                   var(--shiftora-color-text);
	background:              var(--shiftora-gradient-surface);
	/*
	 * The wrapper fills the viewport so a sticky rail has something to stick to and
	 * the page background reaches the bottom on a short screen.
	 */
	min-block-size:          100vh;
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.shiftora-wrap :focus-visible {
	outline:        2px solid var(--shiftora-color-border-focus);
	outline-offset: 2px;
	border-radius:  var(--shiftora-radius-md);
}

/* ── Headings ────────────────────────────────────────────────────────────────── */
.shiftora-wrap :is(h1, h2, h3, h4, h5, h6) {
	margin-block:   0 var(--shiftora-space-3);
	font-weight:    var(--shiftora-font-weight-bold);
	line-height:    var(--shiftora-line-height-tight);
	letter-spacing: var(--shiftora-tracking-tight);
	color:          var(--shiftora-color-text);
}

.shiftora-wrap h1 { font-size: var(--shiftora-font-size-3xl); letter-spacing: var(--shiftora-tracking-tight); }
.shiftora-wrap h2 { font-size: var(--shiftora-font-size-2xl); }
.shiftora-wrap h3 { font-size: var(--shiftora-font-size-xl);  }
.shiftora-wrap h4 { font-size: var(--shiftora-font-size-lg);  font-weight: var(--shiftora-font-weight-semibold); }
.shiftora-wrap h5 { font-size: var(--shiftora-font-size-base);}
.shiftora-wrap h6 { font-size: var(--shiftora-font-size-sm);  }

/* ── Body text ───────────────────────────────────────────────────────────────── */
.shiftora-wrap p {
	margin-block: 0 var(--shiftora-space-4);
	color:        var(--shiftora-color-text-secondary);
}

.shiftora-wrap p:last-child {
	margin-block-end: 0;
}

/*
 * `:where()` keeps this link default at (0,0,1) specificity. As `.shiftora-wrap a`
 * it would be (0,1,1) and outrank single-class component rules such as the nav link color.
 */
:where(.shiftora-wrap) a {
	color:           var(--shiftora-color-text-link);
	text-decoration: none;
	transition:      color var(--shiftora-transition-fast);
}

:where(.shiftora-wrap) a:hover {
	color:           var(--shiftora-color-text-link-hover);
	text-decoration: underline;
}

.shiftora-wrap :is(code, kbd) {
	font-family:    var(--shiftora-font-family-mono);
	font-size:      0.875em;
	background:     var(--shiftora-n-100);
	border:         1px solid var(--shiftora-color-border-light);
	border-radius:  var(--shiftora-radius-sm);
	padding-inline: 0.35em;
	padding-block:  0.1em;
	color:          var(--shiftora-color-text-mono);
}

.shiftora-wrap pre {
	font-family:   var(--shiftora-font-family-mono);
	font-size:     var(--shiftora-font-size-sm);
	background:    var(--shiftora-n-50);
	border:        1px solid var(--shiftora-color-border);
	border-radius: var(--shiftora-radius-lg);
	padding:       var(--shiftora-space-4);
	overflow-x:    auto;
	line-height:   var(--shiftora-line-height-relaxed);
	color:         var(--shiftora-color-text-mono);
}

/* ── Layout shell ────────────────────────────────────────────────────────────── */


.shiftora-main {
	flex:            1;
	inline-size:     min(100%, var(--shiftora-content-max-width));
	padding:         var(--shiftora-space-7) var(--shiftora-space-6);
	background-color: var(--shiftora-color-bg);
	overflow-y:      auto;
}

/* ── Page header ─────────────────────────────────────────────────────────────── */
.shiftora-page-header {
	margin-block-end: var(--shiftora-space-7);
}

.shiftora-page-header h1 {
	margin-block-end: var(--shiftora-space-2);
	font-size:        var(--shiftora-font-size-2xl);
}

.shiftora-page-header p {
	color:            var(--shiftora-color-text-muted);
	margin-block-end: 0;
	font-size:        var(--shiftora-font-size-base);
}

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.shiftora-divider {
	border:             0;
	border-block-start: 1px solid var(--shiftora-color-border-light);
	margin-block:       var(--shiftora-space-6);
}

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
@keyframes shiftora-spin {
	to { transform: rotate(360deg); }
}

.shiftora-spinner {
	display:        inline-block;
	inline-size:    1.25em;
	block-size:     1.25em;
	border:         2px solid var(--shiftora-color-border);
	border-block-start-color: var(--shiftora-color-primary);
	border-radius:  50%;
	animation:      shiftora-spin 0.65s linear infinite;
	vertical-align: middle;
	flex-shrink:    0;
}

/* ── Skeleton ────────────────────────────────────────────────────────────────── */
@keyframes shiftora-shimmer {
	from { background-position: -200% 0; }
	to   { background-position:  200% 0; }
}

.shiftora-skeleton {
	background: linear-gradient(
		90deg,
		var(--shiftora-n-150) 25%,
		var(--shiftora-n-200) 50%,
		var(--shiftora-n-150) 75%
	);
	background-size: 200% 100%;
	animation:       shiftora-shimmer 1.6s ease infinite;
	border-radius:   var(--shiftora-radius-sm);
}


/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes shiftora-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes shiftora-scale-in {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes shiftora-slide-up {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/*
 * Reduced motion.
 *
 * Collapse the durations and swap the spinner for a static indicator. Every
 * keyframe animation has to stop, not just the transition tokens. The busy
 * state stays announced through aria-busy on whatever owns it.
 */
@media (prefers-reduced-motion: reduce) {
	.shiftora-wrap *,
	.shiftora-wrap *::before,
	.shiftora-wrap *::after {
		animation-duration:        1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration:       1ms !important;
		scroll-behavior:           auto !important;
	}

	.shiftora-wrap .shiftora-spinner {
		animation:                none !important;
		border-block-start-color: var(--shiftora-color-primary) !important;
		opacity:                  1 !important;
	}
}

/* ── Utility classes ─────────────────────────────────────────────────────────── */
.sr-only {
	position:    absolute;
	inline-size: 1px;
	block-size:  1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

.shiftora-flex         { display: flex; }
.shiftora-flex-col     { display: flex; flex-direction: column; }
.shiftora-items-start  { align-items: flex-start; }
.shiftora-items-center { align-items: center; }
.shiftora-items-end    { align-items: flex-end; }
.shiftora-justify-between { justify-content: space-between; }
.shiftora-justify-end  { justify-content: flex-end; }

.shiftora-gap-1 { gap: var(--shiftora-space-1); }
.shiftora-gap-2 { gap: var(--shiftora-space-2); }
.shiftora-gap-3 { gap: var(--shiftora-space-3); }
.shiftora-gap-4 { gap: var(--shiftora-space-4); }
.shiftora-gap-6 { gap: var(--shiftora-space-6); }

.shiftora-w-full  { inline-size: 100%; }
.shiftora-text-sm { font-size: var(--shiftora-font-size-sm); }
.shiftora-text-xs { font-size: var(--shiftora-font-size-xs); }
.shiftora-text-muted { color: var(--shiftora-color-text-muted); }
.shiftora-font-mono  { font-family: var(--shiftora-font-family-mono); }

.shiftora-truncate {
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

/* ── Grid helpers ────────────────────────────────────────────────────────────── */
.shiftora-grid-2 {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
	gap:                   var(--shiftora-space-6);
}

.shiftora-grid-3 {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap:                   var(--shiftora-space-4);
}

/* ── Button group ────────────────────────────────────────────────────────────── */
.shiftora-btn-group {
	display:     flex;
	gap:         var(--shiftora-space-2);
	align-items: center;
	flex-wrap:   wrap;
}

/* ── Form group ──────────────────────────────────────────────────────────────── */
.shiftora-form-group {
	display:          flex;
	flex-direction:   column;
	gap:              var(--shiftora-space-2);
	margin-block-end: var(--shiftora-space-4);
}

.shiftora-form-group:last-child {
	margin-block-end: 0;
}

/* ── Spacing utilities ───────────────────────────────────────────────────────
 * One-off gaps between blocks in the views, replacing inline style attributes.
 * ─────────────────────────────────────────────────────────────────────────── */
.shiftora-m-0     { margin: 0; }
.shiftora-mt-1    { margin-block-start: var(--shiftora-space-1); }
.shiftora-mt-2    { margin-block-start: var(--shiftora-space-2); }
.shiftora-mt-3    { margin-block-start: var(--shiftora-space-3); }
.shiftora-mt-4    { margin-block-start: var(--shiftora-space-4); }
.shiftora-mb-1    { margin-block-end: var(--shiftora-space-1); }
.shiftora-mb-2    { margin-block-end: var(--shiftora-space-2); }
.shiftora-mb-3    { margin-block-end: var(--shiftora-space-3); }
.shiftora-mb-4    { margin-block-end: var(--shiftora-space-4); }
.shiftora-mb-5    { margin-block-end: var(--shiftora-space-5); }
.shiftora-mb-6    { margin-block-end: var(--shiftora-space-6); }
.shiftora-ms-auto { margin-inline-start: auto; }
.shiftora-py-2    { padding-block: var(--shiftora-space-2); }
.shiftora-py-3    { padding-block: var(--shiftora-space-3); }
.shiftora-flex-wrap      { flex-wrap: wrap; }
.shiftora-font-semibold  { font-weight: var(--shiftora-font-weight-semibold); }

/* A short list that scrolls inside its panel rather than pushing the page. */
.shiftora-scroll-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--shiftora-space-1);
	max-block-size: 10rem;
	overflow-y:     auto;
}

/* Options that belong to the checkbox above them, indented under its label. */
.shiftora-nested {
	margin-block-start:   var(--shiftora-space-2);
	padding-inline-start: var(--shiftora-space-6);
}

.shiftora-nested--stack {
	display:            flex;
	flex-direction:     column;
	gap:                var(--shiftora-space-3);
	margin-block-start: var(--shiftora-space-3);
}

/* ── Action card ─────────────────────────────────────────────────────────────
 * The first choice on the Migrate screen: one button per job, each a card.
 * The icon tile takes the accent only on hover or focus.
 * ─────────────────────────────────────────────────────────────────────────── */
.shiftora-action-card {
	appearance: none;
	inline-size: 100%;
	text-align:  start;
	font:        inherit;
	color:       inherit;
}

.shiftora-action-card__icon {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	inline-size:      2.25rem;
	block-size:       2.25rem;
	margin-block-end: var(--shiftora-space-3);
	border-radius:    var(--shiftora-radius-md);
	background:       var(--shiftora-gradient-primary);
	color:            #fff;
	box-shadow:       var(--shiftora-glow-primary);
	transition:       background var(--shiftora-transition-fast), color var(--shiftora-transition-fast), box-shadow var(--shiftora-transition-fast);
}

.shiftora-action-card:hover .shiftora-action-card__icon,
.shiftora-action-card:focus-visible .shiftora-action-card__icon {
	background: var(--shiftora-gradient-primary-hover);
	color:      #fff;
	box-shadow: var(--shiftora-glow-primary-hover);
}

.shiftora-action-card__title {
	margin:      0 0 var(--shiftora-space-1);
	font-size:   var(--shiftora-font-size-base);
	font-weight: var(--shiftora-font-weight-semibold);
	color:       var(--shiftora-color-text);
}

.shiftora-action-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap:                   var(--shiftora-space-4);
}