/**
 * Overview — design turn 2, artboard 2a.
 *
 * Values extracted from the artboard's markup; see
 * docs/design-specs/turn-2-overview.md.
 *
 * This screen uses the WordPress admin palette rather than the ledger's dark
 * one. That is deliberate and stated in the spec: the Overview is a native admin
 * page, the ledger a specialised tool panel. The brand accent appears only on
 * the primary action.
 *
 * Prefixed .ag-ov so nothing here can reach .ag-ledger.
 */

.ag-ov {
	/* Same mapping as the ledger — see admin-tokens.css. Both screens read the
	   same names, so light/dark is decided in one file. */
	--ov-text:       var(--ag-text);
	--ov-soft:       var(--ag-text-soft);
	--ov-mute:       var(--ag-text-mute);
	--ov-label:      var(--ag-text-faint);
	--ov-rule:       var(--ag-rule);
	--ov-rule-soft:  var(--ag-rule-soft);
	--ov-border:     var(--ag-border);
	--ov-ground:     var(--ag-bg);
	--ov-ground-alt: var(--ag-bg-sunk);

	--ov-accent:     var(--ag-accent);
	--ov-accent-ink: var(--ag-accent-ink);

	--ov-warn-ink:    var(--ag-warn);
	--ov-warn-rule:   var(--ag-warn-rule);
	--ov-warn-ground: var(--ag-warn-ground);
	--ov-warn-code:   var(--ag-warn-code);

	--ov-mono: var(--ag-mono);
	--ov-sans: var(--ag-sans);

	/* The stream's columns, shared by the spine and the gates so the nodes land
	   on the gates they mark. */
	--ov-stream-cols: 168px repeat(4, 1fr) 190px;

	font-family: var(--ov-sans);
	color: var(--ov-text);
	max-width: 1200px;
}

.ag-ov h1 {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 600;
	color: var(--ov-text);
}

.ag-ov__lede {
	margin: 0 0 22px;
	max-width: 78ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ov-soft);
}

.ag-ov__lede strong { color: var(--ov-text); font-weight: 600; }
.ag-ov__lede .ag-ov__alarm { color: var(--ov-warn-ink); font-weight: 600; }

/* ─── panels ──────────────────────────────────────────────────────────── */

.ag-ov__panel {
	background: var(--ov-ground);
	border: 1px solid var(--ov-border);
	border-radius: 3px;
	margin-bottom: 18px;
}

.ag-ov__panel--pad { padding: 22px 24px 20px; }

.ag-ov__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ov-label);
}

.ag-ov__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	background: var(--ov-ground-alt);
	border-bottom: 1px solid var(--ov-rule);
}

.ag-ov__bar-note { font-size: 10.5px; color: var(--ov-mute); }

/* ─── the stream ──────────────────────────────────────────────────────── */

.ag-ov__stream-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.ag-ov__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 10.5px;
	color: var(--ov-mute);
}

.ag-ov__legend span { display: flex; align-items: center; gap: 6px; }

.ag-ov__swatch {
	display: inline-block;
	width: 9px;
	height: 9px;
	flex: none;
}

.ag-ov__swatch--settled { background: var(--ov-text); }

/* half-filled: an item that is open but not idle */
.ag-ov__swatch--open {
	border: 1px solid var(--ov-warn-ink);
	background: linear-gradient(90deg, var(--ov-warn-ink) 50%, transparent 50%);
}

.ag-ov__swatch--idle { border: 1px solid var(--ov-border); }

/* Gates wrap rather than scroll: an admin screen can be any width, and a
   horizontally scrolling pipeline hides the very step someone is looking for. */
/* The artboard's columns exactly, so the spine's nodes land on the gates they
   mark. A spine that does not align to its labels is worse than no spine. */
/* gap: 0 with padding on the cells, not gap between them — the artboard's own
   arrangement, and the reason the spine's nodes land exactly on the boundary
   between one gate and the next rather than in the gutter beside it. */
.ag-ov__gates {
	display: grid;
	grid-template-columns: var(--ov-stream-cols);
	gap: 0;
	margin-top: 14px;
}

/* ─── the spine ───────────────────────────────────────────────────────── */

.ag-ov__spine {
	display: grid;
	grid-template-columns: var(--ov-stream-cols);
	align-items: center;
	height: 22px;
	margin-bottom: 4px;
}

.ag-ov__span {
	display: flex;
	align-items: center;
	min-width: 0;
}

.ag-ov__seg {
	flex: 1;
	width: 100%;
	background: var(--ov-rule);
}

/* The only run a visitor ever meets. */
.ag-ov__seg--out { background: var(--ov-accent); }

.ag-ov__node {
	display: inline-block;
	width: 13px;
	height: 13px;
	flex: none;
	background: var(--ov-text);
}

/* Same vocabulary as the legend above it, and as the Modules screen's states:
   solid, half-filled, outline. */
.ag-ov__node--open {
	border: 1px solid var(--ov-warn-ink);
	background: linear-gradient(90deg, var(--ov-warn-ink) 50%, transparent 50%);
}

.ag-ov__node--idle {
	border: 1px solid var(--ov-border);
	background: none;
}

.ag-ov__gate {
	min-width: 0;
	padding: 0 20px;
}

/* The stream's two ends sit flush with the panel. */
.ag-ov__gate:first-child { padding-left: 0; }
.ag-ov__gate:last-child { padding-right: 0; }

/* A gate with an open item is shaded, so the amber line under it is not the
   only thing carrying the state. */
.ag-ov__gate--flagged {
	background: var(--ov-warn-ground);
	box-shadow: inset 0 0 0 1px var(--ov-warn-rule);
}

.ag-ov__gate-tag {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ov-mute);
}

.ag-ov__gate-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ov-text);
	margin-top: 2px;
}

/* Underlined, because each one goes to the screen that operates that gate —
   the map is only a map if you can travel from it. */
.ag-ov__gate-name a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--ov-border);
}

.ag-ov__gate-name a:hover,
.ag-ov__gate-name a:focus {
	text-decoration-color: var(--ov-text);
}

.ag-ov__gate-does {
	font-size: 11px;
	color: var(--ov-mute);
	margin-top: 1px;
}

.ag-ov__gate-figure {
	font-size: 20px;
	font-weight: 600;
	color: var(--ov-text);
	margin-top: 10px;
	font-variant-numeric: tabular-nums;
}

.ag-ov__gate-figure small {
	font-size: 12px;
	font-weight: 400;
	color: var(--ov-mute);
}

.ag-ov__gate-note {
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ov-soft);
	margin-top: 6px;
}

.ag-ov__gate-flag {
	display: block;
	margin-top: 8px;
	padding-left: 8px;
	border-left: 2px solid var(--ov-warn-rule);
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--ov-warn-ink);
}

/* ─── two-column band ─────────────────────────────────────────────────── */

.ag-ov__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	margin-top: 20px;
	align-items: start;
}

@media (max-width: 900px) {
	.ag-ov__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ─── needs attention ─────────────────────────────────────────────────── */

.ag-ov__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ov-rule-soft);
	border-left: 2px solid var(--ov-warn-rule);
	background: var(--ov-warn-ground);
}

/* Housekeeping changes nothing on the site, so it does not get the alarm. */
.ag-ov__item--quiet {
	border-left-color: var(--ov-border);
	background: var(--ov-ground);
}

.ag-ov__item:last-child { border-bottom: 0; }

.ag-ov__item-body { flex: 1; min-width: 0; }

.ag-ov__item-copy {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ov-text);
}

.ag-ov__item-copy code {
	font-family: var(--ov-mono);
	font-size: 12px;
	background: var(--ov-warn-code);
	padding: 0 3px;
	border-radius: 2px;
}

.ag-ov__item--quiet .ag-ov__item-copy code { background: var(--ov-ground-alt); }

.ag-ov__item-meta {
	font-size: 11px;
	line-height: 1.5;
	color: var(--ov-mute);
	margin-top: 5px;
}

.ag-ov__item-meta code { font-family: var(--ov-mono); font-size: 10.5px; }

.ag-ov__empty {
	padding: 16px;
	font-size: 13px;
	color: var(--ov-soft);
}

/* ─── buttons ─────────────────────────────────────────────────────────── */

.ag-ov__btn {
	font-family: var(--ov-sans);
	font-size: 12px;
	line-height: 1;
	padding: 8px 12px;
	border: 1px solid var(--ov-border);
	background: var(--ov-ground);
	color: var(--ov-text);
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}

.ag-ov__btn:hover { border-color: var(--ov-mute); color: var(--ov-text); }

.ag-ov__btn--primary {
	background: var(--ov-accent);
	border-color: var(--ov-accent);
	color: var(--ov-accent-ink);
	font-weight: 600;
}

.ag-ov__btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }

/* ─── last capture ────────────────────────────────────────────────────── */

.ag-ov__file {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 16px;
	font-family: var(--ov-mono);
	font-size: 11px;
	color: var(--ov-soft);
}

.ag-ov__file-size { color: var(--ov-mute); flex: none; font-variant-numeric: tabular-nums; }
.ag-ov__file--absent { color: var(--ov-mute); }

.ag-ov__capture-actions { display: flex; gap: 8px; padding: 12px 16px 14px; }

/* ─── the suite ───────────────────────────────────────────────────────── */

/* Two columns, as drawn. auto-fit spread these to four on a wide screen and
   left a hole where the last row ran out of screens — the grid decided the
   layout instead of the design doing it. */
.ag-ov__suite {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--ov-rule-soft);
}

@media (max-width: 782px) {
	.ag-ov__suite { grid-template-columns: minmax(0, 1fr); }
}

.ag-ov__screen {
	background: var(--ov-ground);
	padding: 14px 16px 15px;
	min-width: 0;
}

.ag-ov__screen-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.ag-ov__screen-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ov-text);
	text-decoration: none;
	border-bottom: 1px solid var(--ov-border);
}

.ag-ov__screen-name:hover { color: var(--ov-text); border-bottom-color: var(--ov-text); }

.ag-ov__state {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	color: var(--ov-mute);
	flex: none;
}

.ag-ov__state--open { color: var(--ov-warn-ink); }

.ag-ov__screen-what {
	font-size: 12px;
	line-height: 1.5;
	color: var(--ov-soft);
	margin-top: 5px;
}

.ag-ov__screen-figures {
	font-family: var(--ov-mono);
	font-size: 10.5px;
	color: var(--ov-mute);
	margin-top: 7px;
}

/* ─── footer ──────────────────────────────────────────────────────────── */

.ag-ov__measured {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 16px;
	padding: 11px 16px;
	background: var(--ov-ground);
	border: 1px solid var(--ov-rule);
	border-radius: 3px;
	font-size: 10.5px;
	color: var(--ov-mute);
}

.ag-ov__measured-label {
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ov-label);
}

.ag-ov__measured-note {
	padding: 0 16px 12px;
	font-size: 10.5px;
	color: var(--ov-mute);
}

/* Below the stream's natural width the gates reflow and the spine can no longer
   line up with them, so it is removed rather than left pointing at the wrong
   column. The figures carry the screen on their own. */
@media (max-width: 1100px) {
	.ag-ov {
		--ov-stream-cols: repeat(auto-fit, minmax(150px, 1fr));
	}

	.ag-ov__spine { display: none; }
}