/* =============================================
   CnTimelineStages — Timeline / progress stages
   ============================================= */

/* ---------- Root container ---------- */
.cn-timeline-stages {
	display: flex;
	align-items: flex-start;
	gap: 0;
	width: 100%;
}

/* Horizontal: left-to-right, scrollable overflow */
.cn-timeline-stages--horizontal {
	flex-direction: row;
	overflow-x: auto;
	padding-bottom: calc(var(--default-grid-baseline, 4px) * 1);
}

/* Vertical: top-to-bottom */
.cn-timeline-stages--vertical {
	flex-direction: column;
}

/* ---------- Stage node ---------- */
.cn-timeline-stages__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	flex: 1 1 0;
	min-width: calc(var(--default-grid-baseline, 4px) * 20); /* 80px */
	text-align: center;
	padding: calc(var(--default-grid-baseline, 4px) * 1);
	border-radius: var(--border-radius-large, 10px);
	transition: background-color 0.15s ease;
}

/* Vertical stages: row layout, TOP aligned.
   It used to be `center`, which centred the indicator and the label against the
   tallest thing in the row. A stage carrying a reason is taller than one
   without, so the label of that one stage slid down out of line with every
   other label on the strip, and the indicator with it. Top alignment makes the
   indicator, the label and anything under it start on the same line whatever
   the row contains. The horizontal variant is unaffected: there the stage is a
   COLUMN, so its `align-items: center` centres the label under the indicator
   horizontally and has nothing to do with vertical drift. */
.cn-timeline-stages--vertical .cn-timeline-stages__stage {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
	min-width: 0;
	gap: calc(var(--default-grid-baseline, 4px) * 3);
}

/* ---------- Track line (horizontal) ---------- */
.cn-timeline-stages--horizontal .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
	content: '';
	position: absolute;
	/* Indicator sits below the stage's top padding (4px), so its vertical
	   center is at padding-top + indicator-radius = 4px + 16px = 20px.
	   Subtract 1px (half the line height) to center the 2px line on it. */
	top: calc(var(--default-grid-baseline, 4px) * 1 + 16px - 1px);
	right: calc(50% + 16px + 4px);
	left: calc(-50% + 16px + 4px);
	height: 2px;
	background-color: var(--color-border, #ededed);
	z-index: 0;
}

/* Completed + current track segments: filled */
.cn-timeline-stages--horizontal .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage::before,
.cn-timeline-stages--horizontal .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage--current::before {
	background-color: var(--color-success-text, var(--color-success, #46ba61));
}

/* ---------- Track line (vertical) ---------- */
/* THE LINE HAS TO STAY ON THE CIRCLES, and top alignment is what makes that
   possible rather than what breaks it.
   It used to hang off the FOLLOWING stage and reach upwards by a percentage of
   that stage's own height, which only found the previous circle when every row
   was exactly as tall as its neighbour. It was written that way because
   `align-items: center` put the circle at 50% of a row whose height nothing
   controlled, so there was no fixed number to aim at. One stage carrying a
   reason was enough to slide the line off the circles.
   Top aligned, the circle's centre is a CONSTANT: the row's top padding (4px)
   plus the indicator's radius (16px). So each stage draws the segment BELOW
   itself, from its own centre (20px down from its top edge) to the next stage's
   centre (20px past its bottom edge, where the next row begins, since the
   vertical container has no gap between stages). Both ends are exact numbers,
   the line runs down the middle of every circle whatever a row contains, and
   the last stage draws nothing because there is nothing under it to reach. */
.cn-timeline-stages--vertical .cn-timeline-stages__stage:not(:last-child)::before {
	content: '';
	position: absolute;
	left: calc(var(--default-grid-baseline, 4px) * 1 + 16px - 1px); /* center of 32px indicator, minus half line width */
	top: calc(var(--default-grid-baseline, 4px) * 1 + 16px); /* this indicator's center */
	bottom: calc((var(--default-grid-baseline, 4px) * 1 + 16px) * -1); /* the next indicator's center */
	width: 2px;
	background-color: var(--color-border, #ededed);
	z-index: 0;
}

/* Completed track segments: filled (vertical). The segment under a completed
   stage is the one the record has travelled, which is what it was before as
   well: the rule moved with the pseudo-element, from "the stage after a
   completed one" to "the completed stage itself". */
.cn-timeline-stages--vertical .cn-timeline-stages__stage--completed:not(:last-child)::before {
	background-color: var(--color-success-text, var(--color-success, #46ba61));
}

/* ---------- Indicator (circle) ---------- */
.cn-timeline-stages__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	border: 2px solid var(--color-border, #ededed);
	background-color: var(--color-main-background, #fff);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Completed indicator: success green with white icon */
.cn-timeline-stages__stage--completed .cn-timeline-stages__indicator {
	background-color: var(--color-success-text, var(--color-success, #46ba61));
	border-color: var(--color-success-text, var(--color-success, #46ba61));
	color: #fff;
}

/* Current indicator: primary blue */
.cn-timeline-stages__stage--current .cn-timeline-stages__indicator {
	background-color: var(--color-primary-element, #0082c9);
	border-color: var(--color-primary-element, #0082c9);
	color: var(--color-primary-element-text, #fff);
}

/* ---------- Checkmark SVG ---------- */
.cn-timeline-stages__checkmark {
	width: 16px;
	height: 16px;
}

/* ---------- Current dot ---------- */
.cn-timeline-stages__dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: currentColor;
}

/* ---------- Label ---------- */
.cn-timeline-stages__label {
	display: block;
	margin-top: calc(var(--default-grid-baseline, 4px) * 1);
	font-size: 0.9em;
	line-height: 1.3;
	color: var(--color-text-maxcontrast, #767676);
	overflow-wrap: anywhere;
}

/* Vertical: label aligns with indicator center */
.cn-timeline-stages--vertical .cn-timeline-stages__label {
	margin-top: 0;
}

/* Completed stage label */
.cn-timeline-stages__stage--completed .cn-timeline-stages__label {
	color: var(--color-main-text, #222);
}

/* Current stage label: bold and prominent */
.cn-timeline-stages__stage--current .cn-timeline-stages__label {
	color: var(--color-main-text, #222);
	font-weight: bold;
}

/* ---------- Subtitle ---------- */
.cn-timeline-stages__subtitle {
	display: block;
	font-size: 0.8em;
	line-height: 1.3;
	color: var(--color-text-maxcontrast, #767676);
	margin-top: 2px;
}

/* ---------- Small size variant ---------- */
.cn-timeline-stages--small .cn-timeline-stages__indicator {
	width: 20px;
	height: 20px;
}

.cn-timeline-stages--small .cn-timeline-stages__checkmark {
	width: 12px;
	height: 12px;
}

.cn-timeline-stages--small .cn-timeline-stages__dot {
	width: 6px;
	height: 6px;
}

.cn-timeline-stages--small .cn-timeline-stages__label {
	font-size: 0.85em;
}

.cn-timeline-stages--small .cn-timeline-stages__stage {
	min-width: calc(var(--default-grid-baseline, 4px) * 14); /* 56px */
}

/* Small horizontal track line offset */
.cn-timeline-stages--small.cn-timeline-stages--horizontal .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
	top: calc(var(--default-grid-baseline, 4px) * 1 + 10px - 1px); /* padding + indicator radius, minus half line height */
	right: calc(50% + 10px + 4px);
	left: calc(-50% + 10px + 4px);
}

/* Small vertical track line offset: the same three numbers with a 20px
   indicator, so its 10px radius replaces the 16px one. */
.cn-timeline-stages--small.cn-timeline-stages--vertical .cn-timeline-stages__stage:not(:last-child)::before {
	left: calc(var(--default-grid-baseline, 4px) * 1 + 10px - 1px); /* center of 20px indicator, minus half line width */
	top: calc(var(--default-grid-baseline, 4px) * 1 + 10px);
	bottom: calc((var(--default-grid-baseline, 4px) * 1 + 10px) * -1);
}

/* ---------- Clickable mode ---------- */
.cn-timeline-stages--clickable .cn-timeline-stages__stage {
	cursor: pointer;
}

.cn-timeline-stages--clickable .cn-timeline-stages__stage:hover {
	background-color: var(--color-background-dark, #ededed);
}

/* A stage that cannot be chosen keeps its focus stop but reads as inert.
   It must also LOOK different from a stage that is merely later in the
   process: dimmed, with a not-allowed cursor. Without the dimming the only
   difference a sighted person could perceive was the cursor, which nobody
   notices, so a blocked stage and an upcoming one were the same picture. */
.cn-timeline-stages--clickable .cn-timeline-stages__stage--disabled:not(.cn-timeline-stages__stage--blocked) {
	cursor: not-allowed;
	opacity: 0.55;
}

/* The dimming must not take the reason with it: an explanation nobody can read
   is the state this rule exists to fix. */
.cn-timeline-stages--clickable .cn-timeline-stages__stage--disabled .cn-stages-widget__reason {
	opacity: 1;
	color: var(--color-text-maxcontrast);
}

/* The stage the record is ON is not a move, and it is not blocked either. It
   carries no `aria-disabled` and no not-allowed cursor: both said "you may not
   go here" about the place the record already is. It simply offers nothing. */
.cn-timeline-stages--clickable .cn-timeline-stages__stage--current {
	cursor: default;
}

.cn-timeline-stages--clickable .cn-timeline-stages__stage--current:hover {
	background-color: transparent;
}

.cn-timeline-stages--clickable .cn-timeline-stages__stage--disabled:hover {
	background-color: transparent;
}

/* Dashed says "later in the process". A refused stage is not that, and takes
   the warning treatment below instead. */
.cn-timeline-stages--clickable .cn-timeline-stages__stage--upcoming.cn-timeline-stages__stage--disabled:not(.cn-timeline-stages__stage--blocked) .cn-timeline-stages__indicator {
	border-style: dashed;
}

/* ---------- Refused: a guard said no ---------- */
/* A STAGE A GUARD REFUSED IS NOT A STAGE THAT IS SIMPLY NEXT WEEK, and it must
   not look like one. On a real case page every stage the record could not reach
   rendered in the same grey, so the one the person was aiming at was the
   faintest thing on the strip and the whole timeline read as broken rather than
   as guarded.
   Dimming is right for "not your step yet" and wrong here, so a refused stage
   keeps full contrast and takes the warning colour. Only the stages a guard
   actually refused get it: if everything is orange, nothing reads as refused,
   which is why the merely-unreachable ones are deliberately left grey.
   There is no error-coloured variant, because `available-actions` answers one
   boolean, `blocked: true`, and no severity beside it. Splitting the colour
   into "refused" and "refused harder" would encode a distinction nobody sent. */
.cn-timeline-stages--clickable .cn-timeline-stages__stage--blocked {
	cursor: not-allowed;
}

.cn-timeline-stages--clickable .cn-timeline-stages__stage--blocked .cn-timeline-stages__indicator {
	border-color: var(--color-warning-text, var(--color-warning, #e9a300));
	color: var(--color-warning-text, var(--color-warning, #e9a300));
}

.cn-timeline-stages--clickable .cn-timeline-stages__stage--blocked .cn-timeline-stages__label {
	color: var(--color-warning-text, var(--color-warning, #e9a300));
}

/* The exclamation mark inside a refused indicator: the part of the signal that
   survives a reader who cannot tell orange from grey. */
.cn-timeline-stages__alert {
	width: 16px;
	height: 16px;
}

.cn-timeline-stages--small .cn-timeline-stages__alert {
	width: 12px;
	height: 12px;
}

/* Focus ring (keyboard only) */
.cn-timeline-stages--clickable .cn-timeline-stages__stage:focus-visible {
	outline: 2px solid var(--color-primary-element, #0082c9);
	outline-offset: 2px;
}

/* Remove default outline for mouse clicks */
.cn-timeline-stages--clickable .cn-timeline-stages__stage:focus:not(:focus-visible) {
	outline: none;
}