/**
 * Google Reviews — design turn 9, artboard 9a/9b.
 *
 * Values from the artboard's markup; see docs/design-specs/turn-9-google-reviews.md.
 * Palette comes from admin-tokens.css, so this screen follows light/dark with the
 * rest of the suite.
 *
 * 9b changes exactly one thing beyond the palette, and it is a real observation:
 * an empty bar in the star histogram reads as empty on light, but on dark a
 * low-alpha track at that size disappears entirely. So zero rows keep the track
 * and drop the LABEL to the faintest grey instead of relying on an invisible bar.
 */

.ag-rev {
	--r-text:   var(--ag-text);
	--r-soft:   var(--ag-text-soft);
	--r-mute:   var(--ag-text-mute);
	--r-label:  var(--ag-text-faint);
	--r-rule:   var(--ag-rule);
	--r-hair:   var(--ag-rule-soft);
	--r-border: var(--ag-border);
	--r-bg:     var(--ag-bg);
	--r-bg-alt: var(--ag-bg-sunk);
	--r-accent: var(--ag-accent);
	--r-ink:    var(--ag-accent-ink);
	--r-warn:   var(--ag-warn);
	--r-warn-rule:   var(--ag-warn-rule);
	--r-warn-ground: var(--ag-warn-ground);

	font-family: var(--ag-sans);
	color: var(--r-text);
	max-width: 1320px;
}

/* ─── the profile is the page header, not a dropdown ──────────────────── */

.ag-rev__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

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

.ag-rev .ag-rev__top h1 { margin: 3px 0 0; font-size: 24px; font-weight: 600; }

.ag-rev__profiles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ag-rev__profiles select,
.ag-rev__profiles input {
	font-size: 12px;
	min-height: 0;
	line-height: 1.7;
	padding: 3px 8px;
	color: var(--r-text);
	background-color: var(--r-bg);
	border-color: var(--r-border);
}

.ag-rev__ghost {
	font-family: var(--ag-sans);
	font-size: 11.5px;
	padding: 5px 11px;
	background: var(--r-bg);
	color: var(--r-soft);
	border: 1px solid var(--r-border);
	border-radius: 2px;
	cursor: pointer;
}

.ag-rev__ghost:hover { border-color: var(--r-mute); color: var(--r-text); }

.ag-rev__lede {
	max-width: 92ch;
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--r-soft);
}

.ag-rev__lede strong { color: var(--r-text); font-weight: 600; }

.ag-rev__notice {
	margin: 0 0 16px;
	padding: 9px 14px;
	background: var(--ag-accent-ground);
	border-left: 3px solid var(--r-accent);
	font-size: 12.5px;
}

/* ─── the choice, before the fields it decides ────────────────────────── */

.ag-rev__methods {
	display: flex;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.ag-rev__method {
	flex: 1;
	min-width: 280px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 15px 16px;
	background: var(--r-bg);
	border: 1px solid var(--r-border);
	border-radius: 3px;
	cursor: pointer;
}

.ag-rev__method:hover { background: var(--ag-bg-hover); }

.ag-rev__method.is-on {
	background: var(--ag-accent-ground);
	border-color: var(--r-accent);
	box-shadow: inset 3px 0 0 var(--r-accent);
}

.ag-rev__method input { margin: 3px 0 0; flex: none; }
.ag-rev__method-body { flex: 1; min-width: 0; }

.ag-rev__method-name { display: block; font-size: 13.5px; font-weight: 600; }

.ag-rev__method-what {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--r-soft);
	margin-top: 4px;
}

/* The trade-off, which is the reason the two are not variations. */
.ag-rev__method-limit {
	display: block;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--r-warn);
	margin-top: 6px;
	padding-left: 9px;
	border-left: 2px solid var(--r-warn-rule);
}

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

.ag-rev__panel {
	background: var(--r-bg);
	border: 1px solid var(--r-border);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 16px;
}

.ag-rev__band {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 9px 16px;
	background: var(--r-bg-alt);
	border-bottom: 1px solid var(--r-hair);
}

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

.ag-rev__band-note { font-size: 11.5px; color: var(--r-mute); }

.ag-rev__inner { padding: 14px 16px 16px; }

/* 9a draws this as the connection row: verdict on the left, "Test the
   connection" on the right. 12px rather than the 10px it had as a text-only
   strip -- the artboard's padding is measured around a button, and a ported
   value is not a matched one. */
.ag-rev__panel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	background: var(--r-bg-alt);
	border-top: 1px solid var(--r-hair);
	font-size: 11.5px;
	color: var(--r-mute);
}

/* 9a draws "Sync now" and "See all 24" adjacent, not pushed to opposite ends
   the way the connection row's verdict and button are. */
.ag-rev__panel-foot--actions {
	justify-content: flex-start;
	gap: 8px;
}

/* The "See all" is an <a> wearing a button's clothes, so it needs the bits a
   link does not get for free. */
a.ag-rev__ghost { text-decoration: none; display: inline-block; }

.ag-rev__warn { color: var(--r-warn); }

/* ─── connection state (9a) ───────────────────────────────────────────── */

/* The 8px square is the artboard's state carrier. 9a only draws the reachable
   one; the other two colours are derived from it rather than invented beside
   it, so the row's geometry never changes as the verdict does. */
.ag-rev__dot {
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--r-text);
}

.ag-rev__dot--unknown { background: var(--r-border); }
.ag-rev__dot--bad     { background: var(--r-warn); }

.ag-rev__resolve {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 7px;
	font-size: 11.5px;
	color: var(--r-mute);
}

.ag-rev__resolve--bad { color: var(--r-warn); }

.ag-rev__verdict {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* 9a's "Test the connection" is the same button species as its "New profile"
   and "Rename", which were built as .ag-rev__ghost -- same 11.5px, same ground,
   same 1px border and 2px radius, same hover. It is reused rather than copied:
   the artboard's inline style differs only by 1px of padding, which is not worth
   a second near-identical class to drift from the first.
   Only the shrink guard is new, because ghost has never sat in a flex row. */
.ag-rev__test { flex: none; }

/* ─── fields ──────────────────────────────────────────────────────────── */

.ag-rev__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 0;
}

.ag-rev__field {
	padding: 14px 16px;
	border-right: 1px solid var(--r-hair);
	border-bottom: 1px solid var(--r-hair);
	min-width: 0;
}

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

.ag-rev__label { font-size: 12.5px; font-weight: 600; }

.ag-rev__aside-word { font-size: 11px; color: var(--r-mute); }

.ag-rev__input {
	width: 100%;
	margin-top: 7px;
	font-family: var(--ag-mono);
	font-size: 12px;
	padding: 5px 8px;
	color: var(--r-text);
	background-color: var(--r-bg);
	border: 1px solid var(--r-border);
	border-radius: 2px;
}

.ag-rev__input.is-secret { letter-spacing: .04em; }

.ag-rev__field-note {
	display: block;
	font-size: 11px;
	line-height: 1.5;
	color: var(--r-mute);
	margin-top: 5px;
}

.ag-rev__field-note--set { color: var(--r-soft); }
.ag-rev__field-note--empty { color: var(--r-warn); }

/* ─── two columns ─────────────────────────────────────────────────────── */

.ag-rev__cols { display: flex; gap: 16px; align-items: flex-start; }
.ag-rev__main { flex: 1; min-width: 0; }
.ag-rev__side { width: 340px; flex: none; }

/* ─── schedule ────────────────────────────────────────────────────────── */

.ag-rev__segment {
	display: flex;
	border: 1px solid var(--r-border);
	border-radius: 2px;
	overflow: hidden;
}

.ag-rev__seg {
	flex: 1;
	text-align: center;
	padding: 7px 10px;
	font-size: 12px;
	color: var(--r-soft);
	background: var(--r-bg);
	border-right: 1px solid var(--r-rule);
	cursor: pointer;
}

.ag-rev__seg:last-child { border-right: 0; }
.ag-rev__seg:hover { background: var(--ag-bg-hover); }

.ag-rev__seg.is-on {
	background: var(--r-text);
	color: var(--r-bg);
	font-weight: 600;
}

.ag-rev__seg input { position: absolute; opacity: 0; pointer-events: none; }

.ag-rev__next {
	margin: 11px 0 0;
	font-size: 12.5px;
	color: var(--r-soft);
}

.ag-rev__next strong { color: var(--r-text); }

.ag-rev__note {
	margin: 9px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--r-mute);
	max-width: 78ch;
}

/* ─── the fingerprint, made visible ───────────────────────────────────── */

.ag-rev__quote {
	margin: 10px 0 0;
	padding: 9px 12px;
	background: var(--r-bg-alt);
	border-left: 2px solid var(--r-border);
	font-size: 12px;
	line-height: 1.55;
	color: var(--r-soft);
	max-width: 78ch;
}

.ag-rev__fingerprint {
	display: block;
	margin: 11px 0 0;
	font-size: 12px;
	color: var(--r-text);
}

.ag-rev__fingerprint::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 8px;
	background: var(--r-text);
}

.ag-rev__fingerprint.is-warn { color: var(--r-warn); }
.ag-rev__fingerprint.is-warn::before { background: var(--r-warn); }

/* ─── stars ───────────────────────────────────────────────────────────── */

.ag-rev__stars { margin: 0; padding: 0; list-style: none; }

.ag-rev__stars li {
	display: grid;
	grid-template-columns: 34px 1fr 34px;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
}

.ag-rev__star { font-family: var(--ag-mono); font-size: 11px; color: var(--r-soft); }

/* The track stays visible at zero. On dark a low-alpha bar at this height
   vanishes, so the row would read as missing rather than as none. */
.ag-rev__track {
	display: block;
	height: 8px;
	background: var(--r-hair);
	border: 1px solid var(--r-rule);
	border-radius: 1px;
	overflow: hidden;
}

.ag-rev__track i { display: block; height: 100%; background: var(--r-text); }

.ag-rev__count {
	font-family: var(--ag-mono);
	font-size: 11.5px;
	text-align: right;
	color: var(--r-text);
}

.ag-rev__count.is-zero { color: var(--r-label); }

/* ─── log ─────────────────────────────────────────────────────────────── */

.ag-rev__log { margin: 0; padding: 0; list-style: none; }

.ag-rev__log li {
	padding: 7px 0;
	border-bottom: 1px solid var(--r-hair);
}

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

.ag-rev__log-when {
	display: block;
	font-family: var(--ag-mono);
	font-size: 10.5px;
	color: var(--r-mute);
}

.ag-rev__log-what {
	display: block;
	font-size: 12px;
	line-height: 1.5;
	color: var(--r-soft);
	margin-top: 2px;
}

/* ─── foot ────────────────────────────────────────────────────────────── */

.ag-rev__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 13px 16px;
	background: var(--r-bg-alt);
	border: 1px solid var(--r-border);
	border-radius: 3px;
	font-size: 12.5px;
	color: var(--r-soft);
}

.ag-rev__foot strong { color: var(--r-text); }

.ag-rev__save {
	font-family: var(--ag-sans);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 16px;
	background: var(--r-accent);
	color: var(--r-ink);
	border: 1px solid var(--r-accent);
	border-radius: 2px;
	cursor: pointer;
}

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

.ag-rev__aside {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--r-mute);
	max-width: 92ch;
}

/* ─── narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	.ag-rev__cols { flex-direction: column; }
	.ag-rev__side { width: 100%; }
}