/* =============================================================================
	 Alert / notice component
	 Calm semantic color cues.
	 Depends on: tokens.css
	 ============================================================================= */

.shiftora-alert {
	display:       flex;
	gap:           var(--shiftora-space-3);
	padding:       var(--shiftora-space-4) var(--shiftora-space-5);
	border-radius: var(--shiftora-radius-lg);
	box-shadow:    var(--shiftora-shadow-xs);
	border:        1px solid transparent;
	font-size:     var(--shiftora-font-size-sm);
	line-height:   var(--shiftora-line-height-normal);
}

.shiftora-alert__icon {
	flex-shrink:  0;
	inline-size:  1.125rem;
	block-size:   1.125rem;
	margin-block-start: 2px;
}

.shiftora-alert__icon svg {
	display:     block;
	inline-size: 100%;
	block-size:  100%;
}

.shiftora-alert__content {
	flex:            1;
	min-inline-size: 0;
}

.shiftora-alert__title {
	font-weight:      var(--shiftora-font-weight-semibold);
	margin-block-end: var(--shiftora-space-1);
	color:            inherit;
	overflow-wrap:    anywhere;
}

.shiftora-alert__body {
	color:   inherit;
	opacity: 0.9;
	overflow-wrap: anywhere;
}

/**
 * The technical line inside an alert: the reason behind the message above it.
 * Smaller and dimmer to stay secondary, but still selectable and readable.
 */
.shiftora-alert__detail {
	margin-block:       var(--shiftora-space-2) var(--shiftora-space-4);
	font-family:        var(--shiftora-font-family-mono);
	font-size:          var(--shiftora-font-size-xs);
	opacity:            0.85;
	overflow-wrap:      anywhere;
}

.shiftora-alert__body a {
	color:       inherit;
	font-weight: var(--shiftora-font-weight-medium);
}

.shiftora-alert__dismiss {
	flex-shrink:         0;
	display:             inline-flex;
	align-items:         center;
	justify-content:     center;
	inline-size:         1.5rem;
	block-size:          1.5rem;
	margin-inline-start: auto;
	cursor:              pointer;
	background:          none;
	border:              none;
	border-radius:       var(--shiftora-radius-sm);
	padding:             0;
	color:               currentColor;
	opacity:             0.6;
	transition:          opacity var(--shiftora-transition-fast), background-color var(--shiftora-transition-fast);
}

.shiftora-alert__dismiss svg {
	inline-size: 0.875rem;
	block-size:  0.875rem;
}

.shiftora-alert__dismiss:hover,
.shiftora-alert__dismiss:focus-visible {
	opacity:          1;
	background-color: rgba(12, 24, 60, 0.06);
}

.shiftora-alert__dismiss:focus-visible {
	outline:        2px solid var(--shiftora-color-border-focus);
	outline-offset: 1px;
}

/* ── Actions, and the recovery guidance a stopped migration shows ─────────── */

.shiftora-banner__actions,
.shiftora-guidance__actions {
	display:            flex;
	flex-wrap:          wrap;
	gap:                var(--shiftora-space-2);
	margin-block-start: var(--shiftora-space-3);
}

.shiftora-banner__actions:empty,
.shiftora-guidance__secondary:empty {
	display: none;
}

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

.shiftora-guidance__facts {
	list-style: none;
	margin:     var(--shiftora-space-3) 0 0;
	padding:    0;
	display:    grid;
	gap:        var(--shiftora-space-1);
	color:      var(--shiftora-color-text-secondary);
}

.shiftora-guidance__fact {
	display:               grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	gap:                   var(--shiftora-space-2);
	align-items:           start;
	margin:                0;
}

.shiftora-guidance__fact svg {
	display:            block;
	inline-size:        0.875rem;
	block-size:         0.875rem;
	margin-block-start: 0.2rem;
}

.shiftora-guidance__fact.is-good svg { color: var(--shiftora-color-success-text); }
.shiftora-guidance__fact.is-bad svg  { color: var(--shiftora-color-error-text); }
.shiftora-guidance__fact.is-info svg { color: var(--shiftora-color-info-text); }

.shiftora-guidance__secondary {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--shiftora-space-3);
	margin:    var(--shiftora-space-2) 0 0;
	font-size: var(--shiftora-font-size-xs);
}

/* ── Variants ────────────────────────────────────────────────────────────────── */

.shiftora-alert--info {
	background-color: var(--shiftora-color-info-bg);
	border-color:     var(--shiftora-color-info-border);
	color:            var(--shiftora-color-info-text);
}

.shiftora-alert--success {
	background-color: var(--shiftora-color-success-bg);
	border-color:     var(--shiftora-color-success-border);
	color:            var(--shiftora-color-success-text);
}

.shiftora-alert--warning {
	background-color: var(--shiftora-color-warning-bg);
	border-color:     var(--shiftora-color-warning-border);
	color:            var(--shiftora-color-warning-text);
}

.shiftora-alert--danger {
	background-color: var(--shiftora-color-error-bg);
	border-color:     var(--shiftora-color-error-border);
	color:            var(--shiftora-color-error-text);
}

.shiftora-alert--neutral {
	background-color: var(--shiftora-n-50);
	border-color:     var(--shiftora-color-border);
	color:            var(--shiftora-color-text-secondary);
}