/**
 * Header & footer — design turns 6, 12 and 13 (artboards 6a–6f).
 *
 * Values from the artboards' markup; see docs/design-specs/turn-13-header-footer-browse.md
 * (and its two predecessors) for the extraction. Palette comes from
 * admin-tokens.css, so the controls follow light/dark with the rest of the
 * suite. Turn 13 removed the grouped list, the assembly stage and the family
 * strip — their styles left with them.
 *
 * The Customizer column is 300px, which is what the artboards drew — designed
 * for its real home rather than adapted to it. The browse panel lives over the
 * preview, WordPress core's own theme-browser pattern.
 */

/* The variables go on the control wrapper WordPress itself renders. There is no
   .ag-parts element to hang them on -- WP_Customize_Control owns the <li> and
   only its type reaches the class list -- and a var() that resolves to nothing
   drops the whole declaration, so every colour and border in this file simply
   was not applied. */
#customize-controls .customize-control-ag_parts,
#customize-controls .customize-control-ag_parts_summary,
#ag-parts-overlay {
	--p-text:   var(--ag-text);
	--p-soft:   var(--ag-text-soft);
	--p-mute:   var(--ag-text-mute);
	--p-label:  var(--ag-text-faint);
	--p-rule:   var(--ag-rule);
	--p-hair:   var(--ag-rule-soft);
	--p-border: var(--ag-border);
	--p-bg:     var(--ag-bg);
	--p-bg-alt: var(--ag-bg-sunk);
	--p-accent: var(--ag-accent);
	--p-accent-ink: var(--ag-accent-ink);
	--p-ground: var(--ag-accent-ground);
	--p-lilac:  var(--ag-relation);
	--p-warn:   var(--ag-warn);
	--p-warn-rule:   var(--ag-warn-rule);
	--p-warn-ground: var(--ag-warn-ground);
	--p-warn-chip:   var(--ag-warn-code);

	/* 6f's own figure-and-ground decision: on light the cards sit on a grey
	   wash; on dark the wash goes DARKER than the panel and the cards stay
	   LIGHTER than it — the same relationship, not the same values. */
	--p-wash:        #fafafa;
	--p-card:        #fff;
	--p-card-border: var(--ag-border);
	--p-inuse:       #fcfee8;
	--p-chip:        #f0f0f1;
	--p-chip-text:   #50575e;

	font-family: var(--ag-sans);
	color: var(--p-text);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-ag-mode="light"]) #customize-controls .customize-control-ag_parts,
	:root:not([data-ag-mode="light"]) #customize-controls .customize-control-ag_parts_summary,
	:root:not([data-ag-mode="light"]) #ag-parts-overlay {
		--p-wash:        #101213;
		--p-card:        #1c1f20;
		--p-card-border: #33383a;
		--p-inuse:       rgba(214, 243, 45, .09);
		--p-chip:        rgba(255, 255, 255, .1);
		--p-chip-text:   rgba(232, 234, 234, .68);
	}
}

:root[data-ag-mode="dark"] #customize-controls .customize-control-ag_parts,
:root[data-ag-mode="dark"] #customize-controls .customize-control-ag_parts_summary,
:root[data-ag-mode="dark"] #ag-parts-overlay {
	--p-wash:        #101213;
	--p-card:        #1c1f20;
	--p-card-border: #33383a;
	--p-inuse:       rgba(214, 243, 45, .09);
	--p-chip:        rgba(255, 255, 255, .1);
	--p-chip-text:   rgba(232, 234, 234, .68);
}

/* The control is a full-bleed list, so it escapes the Customizer's own
   16px gutter rather than sitting in a box inside it. */
#customize-controls .customize-control-ag_parts,
#customize-controls .customize-control-ag_parts_summary {
	margin: 0 0 0 -12px;
	width: calc(100% + 24px);

	/* The selected and refused grounds are low-alpha washes meant to sit on this
	   screen's own surface. The Customizer sidebar is white, so without an opaque
	   ground here they composited over WHITE in dark mode -- a pale yellow row
	   carrying near-white text. Paint it once and everything translucent inside
	   lands on the right colour. */
	background: var(--p-bg);
}

/* ─── shared pieces ───────────────────────────────────────────────────── */

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

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

.ag-parts__what {
	display: block;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--p-soft);
	margin-top: 6px;
}

.ag-parts__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--p-text);
}

.ag-parts__slug {
	display: block;
	font-family: var(--ag-mono);
	font-size: 10px;
	color: var(--p-mute);
	margin-top: 2px;
	overflow-wrap: anywhere;
}

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

/* ─── thumbnails ──────────────────────────────────────────────────────── */

/* Drawn from the declared slots, so a part whose slots change cannot keep an
   old picture.

   The literal ground is deliberate and stays out of the token system: these
   depict the SITE, which is dark whichever way the admin is set. Tinting them
   with the admin palette would make the drawing lie about what the visitor
   sees. */
.ag-parts__thumb {
	position: relative;
	display: block;
	width: 30px;
	height: 21px;
	flex: none;
	background: #141414;
	border: 1px solid var(--p-card-border);
}

.ag-parts__thumb--card {
	width: 52px;
	height: 37px;
}

.ag-parts__slot {
	position: absolute;
	background: var(--p-accent);
}

.ag-parts__slot--top    { left: 2px; right: 2px; top: 2px; height: 4px; }
.ag-parts__slot--bottom { left: 2px; right: 2px; bottom: 2px; height: 4px; background: var(--p-lilac); }
.ag-parts__slot--left   { left: 2px; top: 8px; bottom: 2px; width: 3px; }
.ag-parts__slot--right  { right: 2px; top: 8px; bottom: 2px; width: 3px; }
.ag-parts__slot--navbar { left: 2px; right: 2px; top: 8px; height: 5px; }

.ag-parts__thumb--card .ag-parts__slot--top    { height: 6px; }
.ag-parts__thumb--card .ag-parts__slot--navbar { top: 13px; height: 7px; }
.ag-parts__thumb--card .ag-parts__slot--left,
.ag-parts__thumb--card .ag-parts__slot--right  { top: 13px; width: 4px; }

/* ─── the slot map ────────────────────────────────────────────────────── */

.ag-parts__slotmap {
	display: block;
	padding: 11px 14px;
	border-bottom: 1px solid var(--p-rule);
}

.ag-parts__slotrow {
	display: flex;
	gap: 5px;
	margin-top: 8px;
}

.ag-parts__slotcard {
	flex: 1;
	min-width: 0;
	padding: 6px 7px;
	background: var(--p-card);
	border: 1px solid var(--p-card-border);
	border-top: 2px solid var(--p-card-border);
	border-radius: 2px;
}

.ag-parts__slotcard.is-header { border-top-color: var(--p-accent); }
.ag-parts__slotcard.is-footer { border-top-color: var(--p-lilac); }

.ag-parts__slotname {
	display: block;
	font-family: var(--ag-mono);
	font-size: 9.5px;
	text-transform: uppercase;
	color: var(--p-text);
}

.ag-parts__slotfill {
	display: block;
	font-size: 10px;
	line-height: 1.3;
	color: var(--p-mute);
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.ag-parts__slotcard:not(.is-filled) .ag-parts__slotfill { color: var(--p-label); }

/* ─── an area: heading, Change, the chosen card ───────────────────────── */

.ag-parts__area {
	display: block;
	padding: 11px 14px;
	border-bottom: 1px solid var(--p-hair);
}

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

.ag-parts__change {
	font: 400 11px var(--ag-sans);
	color: var(--p-lilac);
	background: none;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--p-lilac) 35%, transparent);
	padding: 0;
	cursor: pointer;
}

.ag-parts__chosen {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 9px;
}

.ag-parts__fills {
	display: block;
	font-family: var(--ag-mono);
	font-size: 9.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--p-mute);
	margin-top: 4px;
}

/* ─── refusal status, browse, recently tried ──────────────────────────── */

.ag-parts__status {
	display: block;
	padding: 11px 14px;
	border-bottom: 1px solid var(--p-rule);
}

.ag-parts__statusline {
	display: block;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--p-soft);
}

.ag-parts__browse {
	font: 600 11.5px var(--ag-sans);
	padding: 6px 13px;
	margin-top: 9px;
	background: var(--p-accent);
	color: var(--p-accent-ink);
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

.ag-parts__recent {
	display: block;
	padding: 11px 14px;
	border-bottom: 1px solid var(--p-hair);
}

.ag-parts__recentrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 7px;
}

.ag-parts__recentname {
	flex: 1;
	min-width: 0;
	font-size: 11.5px;
	color: var(--p-soft);
}

.ag-parts__recentwhen {
	font-size: 10.5px;
	color: var(--p-mute);
	flex: none;
}

/* ─── what the preview cannot show ────────────────────────────────────── */

.ag-parts__panel {
	display: block;
	margin: 10px 14px 0;
	padding: 10px 12px;
	background: var(--p-bg);
	border: 1px solid var(--p-border);
	border-radius: 3px;
}

.ag-parts__panel:last-of-type { margin-bottom: 12px; }

.ag-parts__panel--warn {
	background: var(--p-warn-ground);
	border-color: var(--p-warn-rule);
}

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

.ag-parts__panel--warn .ag-parts__panel-head { color: var(--p-warn); }

.ag-parts__panel-body {
	display: block;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--p-soft);
	margin-top: 5px;
}

.ag-parts__panel--warn .ag-parts__panel-body { color: var(--ag-warn-ink); }

.ag-parts__panel-actions {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.ag-parts__minor {
	font: 400 10.5px var(--ag-sans);
	padding: 3px 8px;
	background: var(--p-card);
	color: var(--p-soft);
	border: 1px solid var(--p-border);
	border-radius: 2px;
	cursor: pointer;
}

.ag-parts__minor:hover { color: var(--p-text); }

/* ─── the browse panel, over the preview ──────────────────────────────── */

/* Mounted inside .wp-full-overlay-main, the preview's own container, which
   core keeps flush with the sidebar at every width (300px, 18% above 1667px,
   nothing when the controls are hidden). Filling it IS "over the preview". */
#ag-parts-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 500000;
	padding: 22px;
	background: color-mix(in srgb, var(--p-text) 22%, transparent);
	overflow: auto;
}

/* The hidden attribute must beat this file's own display values — a card set
   to display:flex ignores [hidden]'s UA default, and every panel and folded
   variant renders at once. */
#ag-parts-overlay[hidden],
#ag-parts-overlay [hidden],
#customize-controls .customize-control-ag_parts_summary [hidden] {
	display: none !important;
}

/* The sentences follow a choice by one request; until it lands they describe
   the previous pair, and read as such. */
#customize-controls [data-ag-summary].is-refreshing {
	opacity: .5;
	transition: opacity .15s;
}

.ag-browse {
	display: flex;
	flex-direction: column;
	max-height: 100%;
	background: var(--p-bg);
	border: 1px solid var(--p-border);
	border-radius: 3px;
	overflow: hidden;
	font-family: var(--ag-sans);
}

.ag-browse__chrome {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	background: var(--p-bg-alt);
	border-bottom: 1px solid var(--p-rule);
	flex: none;
}

.ag-browse__chrome .ag-parts__grouplabel { flex: none; }

.ag-browse__search {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 9px;
	background: var(--p-bg);
	border: 1px solid var(--p-border);
	border-radius: 2px;
}

.ag-browse__search > span { font-size: 11px; color: var(--p-label); }

.ag-browse__search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font-size: 12px;
	color: var(--p-text);
	padding: 0;
	box-shadow: none;
}

.ag-browse__search input:focus { outline: none; box-shadow: none; }

.ag-browse__sort {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--p-label);
	flex: none;
}

.ag-browse__sort select {
	font-size: 11.5px;
	color: var(--p-soft);
	background: var(--p-bg);
	border: 1px solid var(--p-border);
	border-radius: 2px;
}

.ag-browse__close {
	font: 400 11.5px var(--ag-sans);
	color: var(--p-label);
	background: none;
	border: none;
	cursor: pointer;
	flex: none;
}

.ag-browse__close:hover { color: var(--p-text); }

.ag-browse__split {
	display: flex;
	align-items: stretch;
	flex: 1;
	min-height: 0;
}

.ag-browse__rail {
	width: 190px;
	flex: none;
	border-right: 1px solid var(--p-hair);
	overflow-y: auto;
}

.ag-browse__facets {
	padding: 10px 12px;
	border-bottom: 1px solid var(--p-hair);
}

.ag-browse__facethead {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--p-label);
	margin-bottom: 4px;
}

.ag-browse__facet {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
}

.ag-browse__facet input { width: 12px; height: 12px; flex: none; margin: 0; }

.ag-browse__facet span {
	flex: 1;
	min-width: 0;
	font-size: 11.5px;
	color: var(--p-text);
}

.ag-browse__facet em {
	font-family: var(--ag-mono);
	font-style: normal;
	font-size: 10.5px;
	color: var(--p-mute);
	flex: none;
}

.ag-browse__hide { padding: 10px 12px; }

.ag-browse__hide label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.ag-browse__hide input { margin: 2px 0 0; width: 12px; height: 12px; flex: none; }

.ag-browse__hide label span {
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--p-text);
}

.ag-browse__hidenote {
	display: block;
	font-size: 11px;
	line-height: 1.45;
	color: var(--p-lilac);
	margin-top: 6px;
	padding-left: 8px;
	border-left: 2px solid var(--p-lilac);
}

.ag-browse__results {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	background: var(--p-wash);
	overflow-y: auto;
}

.ag-browse__resultbar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.ag-browse__sentence {
	font-size: 12px;
	color: var(--p-soft);
}

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

.ag-browse__folded {
	font: 400 11px var(--ag-sans);
	color: var(--p-lilac);
	background: none;
	border: none;
	border-bottom: 1px solid color-mix(in srgb, var(--p-lilac) 35%, transparent);
	padding: 0;
	cursor: pointer;
	flex: none;
}

.ag-browse__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 11px;
}

@media (max-width: 1240px) {
	.ag-browse__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
	.ag-browse__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.ag-browse__split { flex-direction: column; }
	.ag-browse__rail { width: auto; border-right: none; border-bottom: 1px solid var(--p-hair); }
	.ag-browse__grid { grid-template-columns: 1fr; }
}

.ag-browse__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	text-align: left;
	background: var(--p-card);
	border: 1px solid var(--p-card-border);
	border-radius: 3px;
	padding: 11px 12px;
	cursor: pointer;
	font-family: inherit;
}

.ag-browse__card:hover { border-color: var(--p-mute); }

.ag-browse__card.is-inuse {
	background: var(--p-inuse);
	border-color: var(--p-accent);
}

.ag-browse__card.is-refused {
	background: var(--p-warn-ground);
	border-color: var(--p-warn-rule);
	cursor: not-allowed;
}

.ag-browse__card:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 1px; }

.ag-browse__cardnames {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-direction: column;
}

.ag-browse__card > .ag-parts__thumb { margin-bottom: -2px; }

.ag-browse__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.ag-browse__chip {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--p-chip-text);
	background: var(--p-chip);
	padding: 2px 5px;
	border-radius: 2px;
}

.ag-browse__chip--lime {
	color: #111314;
	background: var(--p-accent);
}

.ag-browse__chip--warn {
	color: var(--p-warn);
	background: var(--p-warn-chip);
}

.ag-browse__chip--mono {
	font-family: var(--ag-mono);
	letter-spacing: .04em;
	text-transform: none;
	font-weight: 400;
	font-size: 9.5px;
}

.ag-browse__cardline {
	font-size: 11px;
	line-height: 1.45;
	color: var(--p-soft);
}

.ag-browse__refusal {
	font-size: 10.5px;
	line-height: 1.45;
	color: var(--p-warn);
}

.ag-browse__card--default { border-style: dashed; }

.ag-browse__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--p-hair);
	font-size: 11.5px;
	color: var(--p-mute);
}

/* ─── the chosen part's settings — the configure verb ─────────────────── */

/* Under the chosen card, in the section's own language. Only the chosen
   part's block shows; the others sit hidden with their inputs still bound. */
.ag-parts__settings {
	display: block;
	margin-top: 11px;
	padding-top: 10px;
	border-top: 1px solid var(--p-hair);
}

.ag-parts__settings[hidden] { display: none; }

.ag-parts__fieldgroup {
	display: block;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--p-label);
	margin-top: 10px;
}

.ag-parts__field {
	display: block;
	margin-top: 8px;
	cursor: text;
}

.ag-parts__fieldlabel {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--p-text);
	margin-bottom: 3px;
}

#customize-controls .ag-parts__field input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 5px 8px;
	background: var(--p-card);
	border: 1px solid var(--p-border);
	border-radius: 2px;
	color: var(--p-text);
	font-family: var(--ag-sans);
	font-size: 12px;
	line-height: 1.4;
	box-shadow: none;
}

#customize-controls .ag-parts__field input::placeholder { color: var(--p-label); }

#customize-controls .ag-parts__field input:focus {
	border-color: var(--p-accent);
	box-shadow: none;
	outline: none;
}

.ag-parts__fieldhelp {
	display: block;
	font-size: 10.5px;
	line-height: 1.5;
	color: var(--p-mute);
	margin-top: 3px;
}

.ag-parts__switch {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 8px;
	cursor: pointer;
}

#customize-controls .ag-parts__switch input {
	margin: 2px 0 0;
	width: 13px;
	height: 13px;
	flex: none;
}

.ag-parts__switchname {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--p-text);
}