/* =============================================================================
	Layout primitives and page furniture.

	A vertical stack, a section with a heading, a definition-style result line, an
	inline confirm row, a feature list, and a list of links with a note each.
	They replace inline `style=""` attributes in the views, which cannot be restyled
	responsively or audited.

	Depends on: tokens.css, base.css
	============================================================================= */

/* ── The stack ─────────────────────────────────────────────────────────────── */

.shiftora-stack {
	display:        flex;
	flex-direction: column;
	/* Varied gaps: the rhythm for page-level structure, so nothing else guesses at a value here. */
	gap:            var(--shiftora-space-6);
	max-inline-size: var(--shiftora-content-max-width);
}

/* ── A section ─────────────────────────────────────────────────────────────── */

.shiftora-section {
	display:        flex;
	flex-direction: column;
	gap:            var(--shiftora-space-3);
}

/*
 * The heading above a section that is not a card. Quieter than a card title, since
 * two headings at the same weight compete.
 */
.shiftora-section__heading {
	margin:     0;
	font-size:   var(--shiftora-font-size-xs);
	font-weight: var(--shiftora-font-weight-semibold);
	color:       var(--shiftora-color-text-muted);
	letter-spacing: var(--shiftora-tracking-wider);
	text-transform: uppercase;
}

.shiftora-section__lead {
	margin: 0;
	max-inline-size: var(--shiftora-content-prose-width);
}

/* ── Result line ───────────────────────────────────────────────────────────── */

/*
 * Where a control says what it just did. Uses `hidden` instead of a stylesheet
 * `display: none` so it stays out of the accessibility tree until there is
 * something to say.
 */
.shiftora-result {
	margin:     0;
	padding:    var(--shiftora-space-2) var(--shiftora-space-3);
	border-radius: var(--shiftora-radius-sm);
	font-size:  var(--shiftora-font-size-sm);
	background: var(--shiftora-color-bg-inset);
	color:      var(--shiftora-color-text-secondary);
}

.shiftora-result--ok {
	background: var(--shiftora-color-success-bg);
	color:      var(--shiftora-color-success-text);
}

.shiftora-result--bad {
	background: var(--shiftora-color-error-bg);
	color:      var(--shiftora-color-error-text);
}

/* ── Inline confirmation ───────────────────────────────────────────────────── */

/*
 * The strip under a card that has been armed. A background step instead of a colored
 * border, so it reads as a state of the card above and not as a separate alert.
 */
.shiftora-card__confirm {
	padding:        var(--shiftora-space-4);
	background:     var(--shiftora-color-bg-inset);
	border-block-start: 1px solid var(--shiftora-color-border);
}

.shiftora-confirm-row {
	display:     flex;
	align-items: center;
	gap:         var(--shiftora-space-3);
	flex-wrap:   wrap;
	margin-block-start: var(--shiftora-space-3);
}

.shiftora-confirm-row .shiftora-input {
	max-inline-size: 12rem;
}

/* ── Card footers ──────────────────────────────────────────────────────────── */

/*
 * Left-aligned instead of the default space-between, which pushes a button and a
 * result line to opposite ends and reads as two unrelated controls.
 */
.shiftora-card__footer--start {
	justify-content: flex-start;
	flex-wrap:       wrap;
	align-items:     center;
	gap:             var(--shiftora-space-3);
}

/* ── Feature list ──────────────────────────────────────────────────────────── */

/*
 * A plain list of facts with nothing to compare, so a list rather than a grid of
 * cards.
 */
.shiftora-checklist {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	border: 1px solid var(--shiftora-color-border);
	border-radius: var(--shiftora-radius-lg);
	overflow: hidden;
}

.shiftora-checklist__item {
	padding:     var(--shiftora-space-3) var(--shiftora-space-4);
	font-size:   var(--shiftora-font-size-sm);
}

.shiftora-checklist__item + .shiftora-checklist__item {
	border-block-start: 1px solid var(--shiftora-color-border-light);
}

/* ── Link list ─────────────────────────────────────────────────────────────── */

/*
 * Where-to-go entries: a destination and one sentence about what is there. Whole-row
 * links, since each one navigates rather than acts.
 */
.shiftora-linklist {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--shiftora-space-2);
}

/*
 * A card-shaped link with a title and a note. The whole component lives here only;
 * a second definition elsewhere would win by load order and break the layout.
 */
.shiftora-linklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shiftora-linklist__item + .shiftora-linklist__item {
	margin-block-start: var(--shiftora-space-3);
}

.shiftora-linklist__link {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	padding:        var(--shiftora-space-4);
	border:         1px solid var(--shiftora-color-border);
	border-radius:  var(--shiftora-radius-lg);
	background:     var(--shiftora-color-card-bg);
	color:          var(--shiftora-color-text);
	text-decoration: none;
	transition:     border-color var(--shiftora-duration-instant) var(--shiftora-ease-out),
	                background-color var(--shiftora-duration-instant) var(--shiftora-ease-out);
}

.shiftora-linklist__link:hover {
	border-color: var(--shiftora-color-card-border-hover);
	background:  var(--shiftora-color-card-bg-hover);
	text-decoration: none;
}

.shiftora-linklist__title {
	font-size:      var(--shiftora-font-size-base);
	font-weight:    var(--shiftora-font-weight-semibold);
	color:          var(--shiftora-color-text);
}

.shiftora-linklist__link:hover .shiftora-linklist__title {
	color: var(--shiftora-color-text-link);
}

.shiftora-linklist__note {
	max-inline-size: var(--shiftora-content-prose-width);
	font-size:       var(--shiftora-font-size-sm);
	color:           var(--shiftora-color-text-secondary);
}

/* ── The next-step panel ───────────────────────────────────────────────────── */

/*
 * The one thing to do, on the first screen. A tinted surface rather than the accent,
 * which is kept for actionable elements; the primary button inside carries the emphasis.
 */
.shiftora-card--next {
	background: var(--shiftora-color-bg-subtle);
	border-color: var(--shiftora-color-border-strong);
}

.shiftora-card__eyebrow {
	margin:       0 0 var(--shiftora-space-1);
	font-size:     var(--shiftora-font-size-xs);
	font-weight:   var(--shiftora-font-weight-semibold);
	color:         var(--shiftora-color-text-muted);
	letter-spacing: var(--shiftora-tracking-wider);
	text-transform: uppercase;
}

.shiftora-next__actions {
	display:     flex;
	align-items: center;
	gap:         var(--shiftora-space-3);
	flex-wrap:   wrap;
	margin-block-start: var(--shiftora-space-5);
}

/* ── A section with a heading and a link ───────────────────────────────────── */

.shiftora-section__head {
	display:     flex;
	align-items: baseline;
	justify-content: space-between;
	gap:         var(--shiftora-space-3);
	flex-wrap:   wrap;
}

.shiftora-section__link {
	font-size:   var(--shiftora-font-size-sm);
	color:       var(--shiftora-color-text-link);
	text-decoration: none;
}

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

/* ── Figures in a row ──────────────────────────────────────────────────────── */

/*
 * Three facts about the installation, side by side. A row rather than cards, since
 * these are values to read, each with its own qualifier.
 */
.shiftora-facts {
	display:            grid;
	/*
	 * 13rem so four facts land four across on a normal content width and two by two on
	 * a narrow one, never three with one orphaned on its own row.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap:                var(--shiftora-space-5);
	padding:            var(--shiftora-space-5);
	border:             1px solid var(--shiftora-color-border);
	border-radius:      var(--shiftora-radius-lg);
	background:         var(--shiftora-color-card-bg);
}

.shiftora-facts .shiftora-figure__note {
	max-inline-size: 34ch;
}

/* ── Direction marker ──────────────────────────────────────────────────────── */

/*
 * Pull and push are distinguished by word as well as color, since two similar hues
 * in a column of rows are an unreliable signal.
 */
.shiftora-dir {
	font-weight: var(--shiftora-font-weight-semibold);
}

.shiftora-dir--pull {
	color: var(--shiftora-color-pull);
}

.shiftora-dir--push {
	color: var(--shiftora-color-push);
}

/* ── A two-column page, split evenly ─────────────────────────────────────────── */

/**
 * Two equal-width columns, each free to hold its own card. Stacks below the
 * breakpoint, since a narrow column of key/value rows is not readable.
 */
.shiftora-grid--split {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap:                   var(--shiftora-space-6);
}

@media screen and (max-width: 960px) {
	.shiftora-grid--split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * `.shiftora-card--measure` caps its own width and centers itself, which is
 * right for a standalone form but means it stays narrow inside a grid column
 * instead of filling it. Lifted only here, not on the class itself, since the
 * wizard steps and the import/export cards rely on the cap for a readable
 * line length.
 */
.shiftora-grid--split > .shiftora-card--measure {
	max-inline-size: none;
	inline-size:     100%;
	margin-inline:   0;
}

/* ── A list of stages, with the state of each ───────────────────────────────── */

/**
 * The four stages of a migration, in order, with where the run has got to. A list
 * rather than a progress bar since there are four names to show. The icon carries
 * state in shape as well as color, and the current stage has a border as well as a fill.
 */
.shiftora-stage-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--shiftora-space-2);
}

.shiftora-stage-item {
	display:               grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items:           center;
	gap:                   var(--shiftora-space-3);
	padding:               var(--shiftora-space-3) var(--shiftora-space-4);
	border:                1px solid var(--shiftora-color-border-light);
	border-radius:         var(--shiftora-radius-md);
	background:            var(--shiftora-color-card-bg);
	font-size:             var(--shiftora-font-size-sm);
}

.shiftora-stage-item.is-current {
	border-color: var(--shiftora-color-primary);
	background:   var(--shiftora-color-primary-subtle);
}

.shiftora-stage-item.is-done {
	color: var(--shiftora-color-text-muted);
}

/*
 * The stage marker is drawn, not typed: glyphs like a check or a dot render at a
 * different size and weight in every system font. The word under the stage name
 * carries the same state for anyone who cannot see the marker.
 */
.shiftora-stage-item__icon {
	position:      relative;
	inline-size:   1.125rem;
	block-size:    1.125rem;
	border-radius: var(--shiftora-radius-full);
	border:        1.5px solid var(--shiftora-color-border-strong);
	background:    var(--shiftora-color-bg-raised);
}

.shiftora-stage-item.is-current .shiftora-stage-item__icon {
	border-color:       var(--shiftora-color-primary-border);
	border-block-start-color: var(--shiftora-color-primary);
	animation:          shiftora-stage-turn 0.9s linear infinite;
}

.shiftora-stage-item.is-done .shiftora-stage-item__icon {
	border-color:        var(--shiftora-color-success);
	background-color:    var(--shiftora-color-success);
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f7f8fb' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.75 2.75L12 5.5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     78%;
}

@keyframes shiftora-stage-turn {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.shiftora-stage-item.is-current .shiftora-stage-item__icon {
		animation:    none;
		border-color: var(--shiftora-color-primary);
	}
}

.shiftora-stage-item__body {
	display:       flex;
	flex-direction: column;
	min-inline-size: 0;
}

.shiftora-stage-item__body small {
	color: var(--shiftora-color-text-muted);
}

.shiftora-stage-item__value {
	font-variant-numeric: tabular-nums;
	color:                var(--shiftora-color-text-muted);
	white-space:          nowrap;
}

/* ── A stack of stage pickers ───────────────────────────────────────────────── */

/*
 * The scope step: one card per stage, each with its own selection. Stacked, because
 * cards hold different numbers of tables and unequal side-by-side cards look broken.
 */
.shiftora-scope-list {
	display:        flex;
	flex-direction: column;
	gap:            var(--shiftora-space-4);
}

/* ── Push or pull, as two options ───────────────────────────────────────────── */

/**
 * A radio group the user picks from. Stacked on narrow screens, since the two labels
 * differ by one word and half-width columns are easy to misread.
 */
.shiftora-direction-options {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   var(--shiftora-space-3);
}

@media screen and (max-width: 600px) {
	.shiftora-direction-options {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── A collapsed group of less-used fields ──────────────────────────────────── */

.shiftora-advanced > summary {
	cursor:           pointer;
	color:            var(--shiftora-color-text-link);
	font-size:        var(--shiftora-font-size-sm);
	font-weight:      var(--shiftora-font-weight-medium);
	list-style:       none;
	padding-block:    var(--shiftora-space-2);
}

.shiftora-advanced > summary::-webkit-details-marker {
	display: none;
}

/* The caret is drawn rather than the browser's, so it points down when open. */
.shiftora-advanced > summary::before {
	content:          '▸';
	display:          inline-block;
	margin-inline-end: var(--shiftora-space-2);
	color:            var(--shiftora-color-text-muted);
	transition:       transform var(--shiftora-transition-fast);
}

.shiftora-advanced[open] > summary::before {
	transform: rotate(90deg);
}

/* ── A row of related fields ────────────────────────────────────────────────── */

.shiftora-form-row {
	display:     flex;
	gap:         var(--shiftora-space-3);
	flex-wrap:   wrap;
	align-items: center;
}

/*
 * The same figures, with no card around them, for a row already inside a card.
 */
.shiftora-facts--bare {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * A card holding a form, capped at a readable width and centered.
 */
.shiftora-card--measure {
	max-inline-size: var(--shiftora-measure-form);
	margin-inline:    auto;
}

/*
 * A bare horizontal scroll container. `.shiftora-table-wrap` adds a border, radius
 * and shadow, which is wrong around a key/value list; this has only the overflow.
 */
.shiftora-table-scroll {
	overflow-x: auto;
	max-inline-size: 100%;
}

/*
 * A two-column label/value list, built as a definition list rather than a table.
 */
.shiftora-kv {
	display:        grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap:            var(--shiftora-space-2) var(--shiftora-space-4);
	font-size:      var(--shiftora-font-size-sm);
}

.shiftora-kv__key {
	color:       var(--shiftora-color-text-muted);
	font-weight: var(--shiftora-font-weight-medium);
}

.shiftora-kv__value {
	color:       var(--shiftora-color-text);
	overflow-wrap: anywhere;
}

/*
 * A small table inside a card that already has padding. The scroll container has
 * no border of its own, so the inset is the card's plus this one's top margin.
 */
.shiftora-table-scroll--inset {
	margin-block-start: var(--shiftora-space-3);
}

.shiftora-size-table {
	width:        100%;
	border-collapse: collapse;
	font-size:    var(--shiftora-font-size-xs);
}

.shiftora-size-table th,
.shiftora-size-table td {
	text-align:   start;
	padding:      var(--shiftora-space-1) 0;
}

.shiftora-size-table th {
	color:        var(--shiftora-color-text-muted);
	font-weight:  var(--shiftora-font-weight-medium);
}

/*
 * A cell whose value can be long, and a field in a toolbar row.
 */
.shiftora-cell--value {
	max-inline-size: var(--shiftora-measure-cell);
	overflow-wrap:   anywhere;
}

.shiftora-field--toolbar {
	min-inline-size: 12rem;
	max-inline-size: var(--shiftora-measure-field);
	margin:          0;
}