/* Readout lines (ADR-019). Co-located with readout.js: one row per value, typed
   out in sequence — the key on the left, a stretching dotted leader, then the
   value on the right. The leader is a CSS border (not typed); the key and value
   spans are typed. Depends on terminal.css for the shared :root tokens. */

.lk-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 1px 0;
	/* Reserve one line's height so the row doesn't grow from padding-only to
	   full height as the first character is typed in. */
	min-height: calc(1.55em + 2px);
	transition: background-color 0.12s;

	/* Hover: tint the row and brighten its leader so the label↔value pairing
	   reads as one connected line. */

	&:hover {
		background: var(--amber-alpha-07);

		.lk-line-dots {
			border-bottom-color: var(--amber);
		}

		.lk-line-key,
		.lk-line-val {
			color: var(--text-hover);
		}
	}

	.lk-line-key {
		flex: 0 1 auto;
		color: var(--amber);
		text-transform: uppercase;
		white-space: nowrap;
		transition: color 0.12s;
	}

	.lk-line-dots {
		flex: 1 1 auto;
		align-self: center;
		min-width: 24px;
		height: 0;
		border-bottom: 1px dotted var(--amber-faint);
		transform: translateY(2px);
		transition: border-bottom-color 0.12s;
	}

	.lk-line-val {
		flex: 0 1 auto;
		color: var(--text);
		text-align: left;
		overflow-wrap: anywhere;
		transition: color 0.12s;
	}

	&.is-warn {
		.lk-line-key,
		.lk-line-val {
			color: var(--danger);
		}

		.lk-line-dots {
			border-bottom-color: var(--danger);
			opacity: 0.5;
		}

		&:hover .lk-line-dots {
			border-bottom-color: var(--danger);
		}
	}
}

/* Nested-block heading line (a key with no value); its leader is absent. */
.lk-line-head {
	margin-top: 8px;
	padding-bottom: 2px;

	.lk-line-key {
		color: var(--amber-dim);
		white-space: normal;
	}
}

/* Rows that carry markup (links + badges) — e.g. linked records — allow the
   key to wrap rather than overflow, and are not typed. */
.lk-line-link .lk-line-key {
	white-space: normal;
}

/* The `[?]` glossary jump on a defined-term row (Readout\Row::termHelp). A quiet
   sibling of the key — faint until hovered — that opens the floating dock and
   flashes the term (assets/glossary.js). Sits tight to its key, pulling back the
   row's flex gap. */
.lk-term-help {
	flex: 0 0 auto;
	margin-left: -4px;
	padding: 0 2px;
	background: none;
	border: 0;
	color: var(--amber-faint);
	font-family: var(--font-mono);
	font-size: 0.78rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.12s;
}

.lk-line:hover .lk-term-help {
	color: var(--amber-dim);
}

.lk-term-help:hover,
.lk-term-help:focus-visible {
	color: var(--amber);
}

.lk-term-help:focus-visible {
	outline: 1px solid var(--amber);
	outline-offset: 1px;
}