/* Aura — the Brand & Design page
   A visual palette editor: the user adds the colours they want, names them freely, and the AI
   decides where to apply them. Everything scoped under .aipb-brand. */

.aipb-brand {
	--aipb-accent: #6d5efc;
	--aipb-accent-ink: #ffffff;
	--aipb-accent-soft: rgba(109, 94, 252, 0.10);
	--aipb-ink: #1f2430;
	--aipb-dim: #6b7280;
	--aipb-border: #e5e7eb;
	--aipb-surface: #ffffff;
	--aipb-radius: 14px;
	--aipb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.07);
	/* No cap. The old 1180px was the reading width of a single column of prose; with the editing on
	   one side and the specimen on the other, every pixel of a wide screen is a pixel of preview or
	   a token card that does not have to wrap. */
	max-width: none;
	margin-right: 20px;
	color: var(--aipb-ink);
	padding-bottom: 84px; /* the fixed bar lives down there */
}

.aipb-brand * { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
   It is the browser's UA stylesheet that gives [hidden] `display: none`, and ANY author rule with a
   display of its own beats it — so a panel styled `display: grid` and rendered `hidden` sits there
   empty, which is how an unsaved-changes badge with no text ended up permanently on the save bar. */
.aipb-brand [hidden] { display: none !important; }

.aipb-brand-head { margin: 8px 0 20px; }
.aipb-brand-head h1 { font-size: 26px; margin: 0 0 6px; }
.aipb-brand-head .description { max-width: 720px; font-size: 14px; color: var(--aipb-dim); }
.aipb-brand code { background: var(--aipb-accent-soft); color: var(--aipb-accent); border-radius: 5px; padding: 1px 6px; }

/* -------------------------------- Panels -------------------------------- */

.aipb-panel {
	background: var(--aipb-surface);
	border: 1px solid var(--aipb-border);
	border-radius: var(--aipb-radius);
	box-shadow: var(--aipb-shadow);
	padding: 22px 24px;
	margin: 0 0 18px;
}
.aipb-panel h2 { font-size: 17px; margin: 0 0 4px; padding: 0; }
.aipb-panel-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--aipb-dim); max-width: 640px; line-height: 1.5; }
.aipb-muted { font-weight: 400; color: var(--aipb-dim); font-size: 13px; }

.aipb-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.aipb-panel-head h2 { margin-bottom: 4px; }
.aipb-panel-head .aipb-panel-sub { margin-bottom: 0; }
.aipb-add { flex: none; border-radius: 9px !important; }

/* ------------------------------- The palette ---------------------------- */

.aipb-palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.aipb-swatch-card {
	position: relative;
	border: 1px solid var(--aipb-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
.aipb-swatch-card:hover { box-shadow: var(--aipb-shadow); border-color: #d5d8de; }
.aipb-swatch-card.is-dragging { opacity: .5; }
.aipb-swatch-card.is-over { border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }

/* A large clickable colour area (it opens the native colour picker) */
.aipb-swatch {
	position: relative;
	height: 92px;
	background: var(--c, #ccc);
	cursor: pointer;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 8px;
}
.aipb-swatch input[type="color"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
	margin: 0;
}
.aipb-swatch .aipb-drag {
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.85);
	color: #333;
	cursor: grab;
	font-size: 13px; line-height: 1;
	backdrop-filter: blur(2px);
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
	position: relative; z-index: 2;
}
.aipb-swatch .aipb-drag:active { cursor: grabbing; }
.aipb-swatch .aipb-pick-hint {
	font-size: 11px; font-weight: 600; letter-spacing: .02em;
	background: rgba(255,255,255,.85); color: #333;
	padding: 3px 8px; border-radius: 999px;
	position: relative; z-index: 2;
	opacity: 0; transition: opacity .15s ease;
}
.aipb-swatch:hover .aipb-pick-hint { opacity: 1; }

.aipb-fields { padding: 12px 12px 14px; display: grid; gap: 8px; }
.aipb-name {
	width: 100%;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 6px 8px;
	font-size: 14px; font-weight: 600;
	background: #f6f7f9;
	color: var(--aipb-ink);
}
.aipb-name:focus { outline: none; border-color: var(--aipb-accent); background: #fff; box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-name::placeholder { color: #9aa0ab; font-weight: 500; }

.aipb-hexrow {
	display: flex; align-items: center; gap: 6px;
	border: 1px solid var(--aipb-border);
	border-radius: 8px;
	padding: 4px 8px;
	background: #fff;
}
.aipb-hexrow:focus-within { border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-hexrow .aipb-dot { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--c, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.aipb-hex {
	border: 0; outline: none; padding: 2px 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px; width: 100%; background: transparent; color: var(--aipb-ink);
	text-transform: lowercase;
}

.aipb-del {
	position: absolute; top: 8px; right: 8px; z-index: 3;
	width: 26px; height: 26px;
	border: 0; border-radius: 7px;
	background: rgba(255,255,255,.85);
	color: #444; cursor: pointer;
	font-size: 16px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
	transition: background .15s ease, color .15s ease;
}
.aipb-del:hover { background: #b32d2e; color: #fff; }

/* The "add" card */
.aipb-add-card {
	border: 2px dashed #d3d6dd;
	border-radius: 12px;
	background: transparent;
	min-height: 200px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px;
	color: var(--aipb-dim);
	cursor: pointer;
	font-size: 14px; font-weight: 600;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.aipb-add-card:hover { border-color: var(--aipb-accent); color: var(--aipb-accent); background: var(--aipb-accent-soft); }
.aipb-add-card .aipb-plus { font-size: 28px; line-height: 1; font-weight: 400; }

/* The empty state */
.aipb-empty {
	grid-column: 1 / -1;
	border: 2px dashed #d3d6dd;
	border-radius: 12px;
	padding: 40px 24px;
	text-align: center;
	color: var(--aipb-dim);
}
.aipb-empty .aipb-empty-swatches { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.aipb-empty .aipb-empty-swatches span { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.aipb-empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--aipb-ink); }
.aipb-empty p { margin: 0 auto 18px; max-width: 420px; font-size: 13.5px; line-height: 1.5; }
.aipb-empty .button { border-radius: 9px !important; }

/* --------------------- Structural tokens (advanced) --------------------- */

/* A 2-column grid of cards, one per token group. */
.aipb-tokgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 16px;
}

.aipb-tok-card {
	border: 1px solid var(--aipb-border);
	border-radius: 12px;
	background: #fff;
	padding: 18px;
}

.aipb-tok-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.aipb-tok-ico {
	width: 36px; height: 36px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 10px;
	background: var(--aipb-accent-soft); color: var(--aipb-accent);
	font-size: 15px; font-weight: 700; line-height: 1;
}
.aipb-tok-card-head h3 { margin: 0; font-size: 15px; }
.aipb-tok-card-head p { margin: 2px 0 0; font-size: 12px; color: var(--aipb-dim); line-height: 1.4; }

.aipb-tok-rows { display: grid; gap: 10px; }
.aipb-tok-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "top pv" "input input";
	align-items: center;
	gap: 8px 12px;
	padding: 12px;
	border: 1px solid var(--aipb-border);
	border-radius: 10px;
	background: #fafbfc;
	transition: border-color .15s ease, background .15s ease;
}
.aipb-tok-row:focus-within { border-color: var(--aipb-accent); background: #fff; }
/* The width bars take the whole row: a full-width preview underneath. */
.aipb-tok-row[data-kind="space"],
.aipb-tok-row[data-kind="layout"] { grid-template-columns: 1fr; grid-template-areas: "top" "pv" "input"; }

.aipb-tok-top { grid-area: top; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.aipb-tok-var {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px; padding: 2px 7px; border-radius: 5px;
	background: var(--aipb-accent-soft); color: var(--aipb-accent);
	white-space: nowrap;
}
.aipb-tok-lbl { font-size: 12px; color: var(--aipb-dim); }

.aipb-tok-pv { grid-area: pv; display: flex; align-items: center; min-height: 40px; overflow: hidden; }
.aipb-tok-input {
	grid-area: input;
	width: 100%;
	border: 1px solid var(--aipb-border); border-radius: 8px;
	padding: 7px 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; background: #fff; color: var(--aipb-ink);
}
.aipb-tok-input:focus { outline: none; border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }

/* Previews ----------------------------------------------------------------- */
.aipb-pv--text { line-height: 1; font-weight: 700; color: var(--aipb-ink); white-space: nowrap; }
.aipb-pv--radius {
	width: 60px; height: 40px; flex: none;
	background: var(--aipb-accent-soft);
	border: 2px solid var(--aipb-accent);
}
.aipb-pv--shadow {
	width: 60px; height: 40px; flex: none;
	border-radius: 10px; background: #fff;
	border: 1px solid #eef0f3;
}
.aipb-pv-track {
	width: 100%; height: 12px;
	border-radius: 999px;
	background: #eceef2;
	overflow: hidden;
	display: flex; align-items: center;
}
.aipb-pv--bar {
	height: 100%; min-width: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--aipb-accent), #8b5cf6);
}

/* ------------------------------- Typography ----------------------------- */

.aipb-fonts { display: grid; gap: 12px; }

.aipb-font-card {
	position: relative;
	border: 1px solid var(--aipb-border);
	border-radius: 12px;
	padding: 16px 16px 8px;
	background: #fff;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.aipb-font-card:hover { box-shadow: var(--aipb-shadow); border-color: #d5d8de; }

.aipb-font-top { display: flex; align-items: center; gap: 12px; padding-right: 34px; flex-wrap: wrap; }
.aipb-font-name {
	flex: 1 1 200px;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 15px; font-weight: 600;
	background: #f6f7f9;
	color: var(--aipb-ink);
}
.aipb-font-name:focus { outline: none; border-color: var(--aipb-accent); background: #fff; box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-font-name::placeholder { color: #9aa0ab; font-weight: 500; }

/* Combobox */
.aipb-combo { position: relative; }
.aipb-combo-btn {
	display: inline-flex; align-items: center; gap: 10px;
	min-width: 220px; justify-content: space-between;
	padding: 8px 12px;
	border: 1px solid var(--aipb-border);
	border-radius: 9px;
	background: #fff; cursor: pointer;
	font-size: 14px; color: var(--aipb-ink);
}
.aipb-combo-btn:hover { border-color: #cfd3da; }
.aipb-combo.is-open .aipb-combo-btn { border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-combo-btn i { font-style: normal; color: var(--aipb-dim); font-size: 11px; }

.aipb-combo-pop {
	position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
	width: 280px; max-width: 80vw;
	background: #fff; border: 1px solid var(--aipb-border);
	border-radius: 11px; box-shadow: var(--aipb-shadow);
	padding: 8px;
}
.aipb-combo-search {
	width: 100%; padding: 8px 10px; margin-bottom: 6px;
	border: 1px solid var(--aipb-border); border-radius: 8px;
	font-size: 13px;
}
.aipb-combo-search:focus { outline: none; border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-combo-list { max-height: 260px; overflow-y: auto; }
.aipb-combo-opt {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
}
.aipb-combo-opt:hover { background: var(--aipb-accent-soft); }
.aipb-combo-opt.is-sel { color: var(--aipb-accent); font-weight: 600; }
.aipb-combo-opt small { color: #9aa0ab; font-size: 11px; flex: none; }
/* The "Install «Font»" row for the fonts outside the catalogue. */
.aipb-combo-install { border-top: 1px solid var(--aipb-border, #e5e7eb); margin-top: 4px; color: var(--aipb-accent); }
.aipb-combo-install b { font-weight: 700; }
/* The checking/installing state of a font. */
.aipb-font-status {
	margin: 0 0 12px; padding: 9px 12px; border-radius: 9px;
	background: var(--aipb-accent-soft); color: var(--aipb-accent);
	font-size: 13px; font-weight: 600;
}

/* Weights */
.aipb-weights-label { margin: 14px 0 8px; font-size: 12px; font-weight: 600; color: var(--aipb-dim); text-transform: uppercase; letter-spacing: .04em; }
.aipb-weights { display: flex; flex-wrap: wrap; gap: 7px; }
.aipb-chip {
	min-width: 44px; padding: 6px 12px;
	border: 1px solid var(--aipb-border); border-radius: 999px;
	background: #fff; cursor: pointer;
	font-size: 13px; color: var(--aipb-ink);
	transition: all .12s ease;
}
.aipb-chip:hover { border-color: var(--aipb-accent); }
.aipb-chip.is-on { background: var(--aipb-accent); border-color: var(--aipb-accent); color: var(--aipb-accent-ink); }

/* Preview */
.aipb-font-preview { margin: 16px 0 12px; padding: 16px; border-radius: 10px; background: #f8f9fb; }
.aipb-font-sample { font-size: 26px; line-height: 1.25; color: var(--aipb-ink); }
.aipb-font-weightrow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.aipb-font-weightrow span { font-size: 20px; color: #444; }

/* -------------------------------- Actions ------------------------------- */

.aipb-reset { color: #b32d2e; text-decoration: none; font-size: 13px; }
.aipb-reset:hover { text-decoration: underline; color: #b32d2e; }

@media (max-width: 600px) {
	.aipb-panel-head { flex-direction: column; }
	.aipb-add { width: 100%; }
}

/* ------------------ Importing tokens from a mockup --------------------- */

.aipb-import .aipb-panel-sub { max-width: 780px; }

/* The drop area: the target has to be large and obvious, because it is the feature's first
   gesture. */
.aipb-imp-drop {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 20px;
	border: 2px dashed var(--aipb-border);
	border-radius: var(--aipb-radius);
	background: #fbfbfd;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.aipb-imp-drop:hover,
.aipb-imp-drop:focus-visible { border-color: var(--aipb-accent); background: var(--aipb-accent-soft); outline: none; }
.aipb-imp-drop.is-over { border-color: var(--aipb-accent); background: var(--aipb-accent-soft); }
.aipb-imp-drop-ico { font-size: 26px; line-height: 1; }
.aipb-imp-drop-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--aipb-dim); }
.aipb-imp-drop-txt b { color: var(--aipb-ink); font-size: 14px; }

.aipb-imp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.aipb-imp-thumbs:empty { display: none; }
.aipb-imp-thumb { position: relative; width: 104px; }
.aipb-imp-thumb img {
	display: block; width: 104px; height: 76px; object-fit: cover;
	border: 1px solid var(--aipb-border); border-radius: 8px; background: #fff;
}
.aipb-imp-thumb-del {
	position: absolute; top: -6px; right: -6px;
	width: 20px; height: 20px; padding: 0;
	border: 1px solid var(--aipb-border); border-radius: 999px;
	background: #fff; color: var(--aipb-dim);
	font-size: 11px; line-height: 1; cursor: pointer;
}
.aipb-imp-thumb-del:hover { color: #b42318; border-color: #f0c2bd; }

.aipb-imp-notes-lbl { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; }

.aipb-imp-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.aipb-imp-status { font-size: 13px; color: var(--aipb-dim); }
.aipb-imp-status.is-busy { color: var(--aipb-accent); }
.aipb-imp-status.is-ok { color: #067647; }
.aipb-imp-status.is-warn { color: #b42318; }

.aipb-imp-result {
	margin-top: 16px; padding: 14px 16px;
	border: 1px solid var(--aipb-border); border-radius: var(--aipb-radius);
	background: #fbfbfd; font-size: 13.5px;
}
.aipb-imp-done { margin: 0 0 6px; font-weight: 600; color: #067647; }
.aipb-imp-skip { margin: 0 0 6px; color: var(--aipb-dim); }
.aipb-imp-notes-head { margin: 10px 0 4px; font-weight: 600; }
.aipb-imp-notelist { margin: 0 0 12px 18px; color: var(--aipb-dim); list-style: disc; }
.aipb-imp-notelist li { margin: 2px 0; }
.aipb-imp-undo { margin-top: 4px; }

/* The colours recognised, with the role the AI saw for each. */
.aipb-imp-swatches { margin: 10px 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; }
.aipb-imp-swatches li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.aipb-imp-swatch {
	width: 18px; height: 18px; flex: 0 0 auto;
	border: 1px solid rgba(16, 24, 40, .12); border-radius: 5px;
}
.aipb-imp-swatches code { font-size: 12px; }
.aipb-imp-usage { color: var(--aipb-dim); }

/* ------------------------- A token that is yours ------------------------- */

/* Twenty-four identical inputs told you nothing about which ones you had touched. The marker is on
   the left edge, where the eye runs down the column, and the ↺ appears only where there is
   something to go back to. */
.aipb-tok-row { position: relative; }
.aipb-tok-row.is-mine {
	border-color: #d8d4fd;
	background: #fbfaff;
}
.aipb-tok-row.is-mine::before {
	content: "";
	position: absolute;
	left: -1px; top: 10px; bottom: 10px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--aipb-accent);
}

.aipb-tok-revert {
	margin-left: auto;
	flex: none;
	border: 1px solid transparent;
	background: none;
	color: var(--aipb-faint, #9aa1ad);
	font-size: 13px;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.aipb-tok-row:hover .aipb-tok-revert,
.aipb-tok-row:focus-within .aipb-tok-revert { opacity: 1; }
.aipb-tok-row.is-mine .aipb-tok-revert { opacity: 1; color: var(--aipb-accent); }
.aipb-tok-revert:hover { background: var(--aipb-accent-soft); color: var(--aipb-accent); }
.aipb-tok-revert:focus-visible { opacity: 1; outline: none; border-color: var(--aipb-accent); }

.aipb-tok-count {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--aipb-accent-soft);
	color: var(--aipb-accent);
}

/* --------------------------- A token of your own ------------------------- */

.aipb-tok-add {
	margin-top: 12px;
	width: 100%;
	border: 1px dashed var(--aipb-border);
	background: none;
	color: var(--aipb-dim);
	border-radius: 10px;
	padding: 9px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.aipb-tok-add:hover { border-color: var(--aipb-accent); color: var(--aipb-accent); background: var(--aipb-accent-soft); }

/* The variable's name is half fixed prefix, half field: you watch the token being born. */
.aipb-tok-var-edit { display: inline-flex; align-items: center; gap: 0; padding-right: 3px; }
.aipb-tok-key-input {
	border: none;
	background: rgba(109, 94, 252, .12);
	border-radius: 4px;
	color: var(--aipb-accent);
	font: inherit;
	padding: 1px 4px;
	margin-left: 1px;
	min-width: 46px;
	width: auto;
}
.aipb-tok-key-input:focus { outline: 2px solid var(--aipb-accent); outline-offset: 0; }

.aipb-tok-lbl-input {
	flex: 1 1 90px;
	min-width: 0;
	border: none;
	border-bottom: 1px dashed transparent;
	background: none;
	font-size: 12px;
	color: var(--aipb-dim);
	padding: 1px 2px;
}
.aipb-tok-lbl-input:hover { border-bottom-color: var(--aipb-border); }
.aipb-tok-lbl-input:focus { outline: none; border-bottom-color: var(--aipb-accent); color: var(--aipb-ink); }

.aipb-tok-drop {
	flex: none;
	border: none;
	background: none;
	color: var(--aipb-faint, #9aa1ad);
	font-size: 16px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.aipb-tok-row:hover .aipb-tok-drop,
.aipb-tok-row:focus-within .aipb-tok-drop { opacity: 1; }
.aipb-tok-drop:hover { background: rgba(179, 45, 46, .1); color: #b32d2e; }

/* A row with no name yet posts nothing: say so rather than let it vanish on save. */
.aipb-tok-row.is-nameless { border-style: dashed; }
.aipb-tok-row.is-own .aipb-tok-revert { display: none; }

/* ============================== The specimen ============================== */

.aipb-spec-panel { padding-bottom: 18px; }
.aipb-spec-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--aipb-dim);
	white-space: nowrap;
	cursor: pointer;
}

/* The stage owns the variables. Everything inside reads --aipb-* exactly as a generated section
   does, so what is on screen is the design system and not an impression of it. */
.aipb-spec {
	border: 1px solid var(--aipb-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: background .2s ease, color .2s ease;
}
.aipb-spec.is-dark { background: #12141a; color: #e9eaee; }
.aipb-spec.is-dark .aipb-spec-row + .aipb-spec-row { border-top-color: rgba(255, 255, 255, .09); }
.aipb-spec.is-dark .aipb-spec-tag { color: rgba(255, 255, 255, .45); }
.aipb-spec.is-dark .aipb-spec-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.aipb-spec.is-dark .aipb-spec-band { background: rgba(255, 255, 255, .04); }
.aipb-spec.is-dark .aipb-spec-band--alt { background: rgba(255, 255, 255, .08); }

.aipb-spec-stage { padding: 4px 20px 20px; }

.aipb-spec-row {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	gap: 20px;
	padding: 22px 0;
	align-items: start;
}
.aipb-spec-row + .aipb-spec-row { border-top: 1px solid var(--aipb-line, #f0f1f4); }
@media (max-width: 820px) { .aipb-spec-row { grid-template-columns: 1fr; gap: 10px; } }

.aipb-spec-tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #9aa1ad;
	padding-top: 4px;
}

/* --- Type ---------------------------------------------------------------- */
/* Every level uses the token, never a hard-coded size: that is the whole point of the panel. */
.aipb-spec-type p { margin: 0 0 6px; line-height: 1.25; font-family: var(--aipb-font-preview-heading, inherit); }
.aipb-spec-4xl  { font-size: var(--aipb-text-4xl); font-weight: 700; letter-spacing: -0.02em; }
.aipb-spec-3xl  { font-size: var(--aipb-text-3xl); font-weight: 700; letter-spacing: -0.015em; }
.aipb-spec-2xl  { font-size: var(--aipb-text-2xl); font-weight: 650; letter-spacing: -0.01em; }
.aipb-spec-xl   { font-size: var(--aipb-text-xl); font-weight: 600; }
.aipb-spec-lg   { font-size: var(--aipb-text-lg); font-weight: 400; opacity: .85; }
.aipb-spec-base { font-size: var(--aipb-text-base); font-weight: 400; line-height: 1.6; max-width: 62ch; font-family: var(--aipb-font-preview-body, inherit); }
.aipb-spec-sm   { font-size: var(--aipb-text-sm); opacity: .65; font-family: var(--aipb-font-preview-body, inherit); }
.aipb-spec-type p:last-child { margin-bottom: 0; }

/* --- Surfaces ------------------------------------------------------------ */
.aipb-spec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--aipb-space-md, 16px); }
.aipb-spec-card {
	background: #fff;
	border: 1px solid var(--aipb-border);
	padding: var(--aipb-space-lg, 24px);
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 96px;
}
.aipb-spec-card b { font-size: var(--aipb-text-sm); }
.aipb-spec-card span { font-size: var(--aipb-text-sm); opacity: .6; }
.aipb-spec-card--sm { border-radius: var(--aipb-radius-sm); box-shadow: var(--aipb-shadow-sm); }
.aipb-spec-card--md { border-radius: var(--aipb-radius-md); box-shadow: var(--aipb-shadow-md); }
.aipb-spec-card--lg { border-radius: var(--aipb-radius-lg); box-shadow: var(--aipb-shadow-lg); }

/* --- Buttons ------------------------------------------------------------- */
.aipb-spec-buttons { display: flex; flex-wrap: wrap; gap: var(--aipb-space-sm, 12px); align-items: center; }
.aipb-spec-btn {
	display: inline-flex;
	align-items: center;
	font-size: var(--aipb-text-sm);
	font-weight: 600;
	padding: var(--aipb-space-sm, 12px) var(--aipb-space-lg, 24px);
	border-radius: var(--aipb-radius-md);
	border: 1px solid transparent;
	line-height: 1.1;
}
.aipb-spec-btn--solid { background: var(--aipb-spec-accent, #1f2430); color: var(--aipb-spec-accent-ink, #fff); box-shadow: var(--aipb-shadow-sm); }
.aipb-spec-btn--outline { border-color: currentColor; opacity: .75; }
.aipb-spec-btn--pill { border-radius: var(--aipb-radius-pill); background: var(--aipb-spec-accent, #1f2430); color: var(--aipb-spec-accent-ink, #fff); }

/* --- Rhythm -------------------------------------------------------------- */
/* The one thing you cannot see anywhere else: two sections stacked, at the real padding. */
.aipb-spec-rhythm { border-radius: var(--aipb-radius-md); overflow: hidden; border: 1px solid var(--aipb-border); }
.aipb-spec-band { background: #fafbfc; padding: var(--aipb-space-2xl, 64px) var(--aipb-space-xl, 40px); }
.aipb-spec-band--alt { background: #f1f2f5; }
.aipb-spec-band p { margin: 0 0 var(--aipb-space-md, 16px); }
.aipb-spec-band p:last-child { margin-bottom: 0; }

/* --- Widths -------------------------------------------------------------- */
.aipb-spec-widths { display: flex; flex-direction: column; gap: 10px; }
.aipb-spec-width { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #9aa1ad; }
.aipb-spec-width i {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(109, 94, 252, .5), rgba(109, 94, 252, .15));
	flex: none;
}
/* Scaled against a 1400px reference so 1200px is a bar and not the whole panel. */
.aipb-spec-width--wide i { width: calc( var(--aipb-container, 1200px) / 14 ); max-width: 100%; }
.aipb-spec-width--narrow i { width: calc( var(--aipb-container-narrow, 720px) / 14 ); max-width: 100%; }

/* --- Palette ------------------------------------------------------------- */
.aipb-spec-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.aipb-spec-sw { display: flex; flex-direction: column; gap: 5px; width: 92px; }
.aipb-spec-sw i {
	display: block;
	height: 52px;
	border-radius: var(--aipb-radius-sm);
	border: 1px solid rgba(15, 23, 42, .1);
}
.aipb-spec-sw b { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipb-spec-sw code { font-size: 10px; background: none; padding: 0; color: #9aa1ad; }

/* The blast radius, where there is one to speak of. */
.aipb-tok-use {
	flex: none;
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 999px;
	background: #f1f2f5;
	color: #6b7280;
	cursor: help;
	white-space: nowrap;
}
.aipb-tok-row.is-mine .aipb-tok-use { background: rgba(109, 94, 252, .1); color: var(--aipb-accent); }

/* --------------------------- What the fonts cost ------------------------- */

.aipb-fw {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--aipb-border);
	border-radius: 10px;
	background: #fafbfc;
}
.aipb-fw.is-loud { border-color: rgba(161, 98, 7, .3); background: rgba(161, 98, 7, .05); }

.aipb-fw-cost { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aipb-fw-num {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.aipb-fw.is-loud .aipb-fw-num { color: #a16207; }
.aipb-fw-lbl { font-size: 12.5px; color: var(--aipb-dim); }
.aipb-fw-warn { margin: 10px 0 0; font-size: 12.5px; color: #a16207; line-height: 1.5; max-width: 74ch; }

.aipb-fw-host {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	max-width: 78ch;
	padding-left: 18px;
	position: relative;
	color: var(--aipb-dim);
}
.aipb-fw-host::before {
	content: "";
	position: absolute;
	left: 3px; top: 6px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
}
.aipb-fw-host.is-ok { color: #1a7f37; }
.aipb-fw-host.is-warn { color: #a16207; }


/* ============================== Two columns ==============================

   Left: everything that edits the design system. Right: what it looks like, pinned.

   The right column is `position: sticky` rather than `fixed` so it stays inside the grid — it
   scrolls with the page until its top reaches the admin bar, then holds. It also caps its own
   height and scrolls internally, because a specimen taller than the viewport would stick with its
   bottom half permanently out of reach, which is the one thing worse than not sticking at all. */

.aipb-brand-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(380px, 30vw, 620px);
	gap: 20px;
	align-items: start;
}
.aipb-brand-main { min-width: 0; }

.aipb-brand-side {
	position: sticky;
	top: 46px; /* the admin bar (32) plus air */
	min-width: 0;
}
.aipb-brand-side .aipb-panel { margin-bottom: 0; }

.aipb-brand-side .aipb-spec {
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overscroll-behavior: contain;
	container-type: inline-size;
}

/* The column's width is a clamp of the viewport, so no media query describes it. Once it is wide
   enough, the specimen goes back to a label column beside each row. */
@container (min-width: 520px) {
	.aipb-brand-side .aipb-spec-row { grid-template-columns: 116px minmax(0, 1fr); gap: 20px; }
	.aipb-brand-side .aipb-spec-tag { padding-top: 4px; }
}

/* In a 430px column the label column of each row is dead weight: the tag goes above its row. */
.aipb-brand-side .aipb-spec-stage { padding: 4px 16px 16px; }
.aipb-brand-side .aipb-spec-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
.aipb-brand-side .aipb-spec-tag { padding-top: 0; }
.aipb-brand-side .aipb-spec-band { padding: var(--aipb-space-xl, 40px) var(--aipb-space-lg, 24px); }
.aipb-brand-side .aipb-spec-cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.aipb-brand-side .aipb-panel-sub { max-width: none; }

/* A display size is a real size: at 5rem it will not fit a narrow column, and a specimen that
   lies about the scale is worse than none. It wraps, and what still overflows is clipped rather
   than allowed to push the whole page sideways. */
.aipb-brand-side .aipb-spec-type p { overflow-wrap: anywhere; }
.aipb-brand-side .aipb-spec { overflow-x: hidden; }

/* The widths bar is scaled against 1400px; in this column that reads as "wider than the panel",
   which is true and useless. Scale it to the column instead. */
.aipb-brand-side .aipb-spec-width--wide i { width: calc( var(--aipb-container, 1200px) / 32 ); }
.aipb-brand-side .aipb-spec-width--narrow i { width: calc( var(--aipb-container-narrow, 720px) / 32 ); }

/* Under 1200px there is no room for two useful columns. */
@media (max-width: 1200px) {
	.aipb-brand-cols { grid-template-columns: 1fr; }
	.aipb-brand-side { position: static; }
	.aipb-brand-side .aipb-spec { max-height: none; overflow-y: visible; }
	.aipb-brand-side .aipb-panel { margin-bottom: 18px; }
	.aipb-brand-side .aipb-spec-row { grid-template-columns: 116px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 820px) {
	.aipb-brand-side .aipb-spec-row { grid-template-columns: 1fr; gap: 10px; }
}

/* -------------------------- Import from a URL ---------------------------- */

.aipb-imp-url { margin-bottom: 6px; }
.aipb-imp-url-lbl { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 7px; }
.aipb-imp-url-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aipb-imp-url-in {
	flex: 1 1 380px;
	min-width: 0;
	border: 1px solid var(--aipb-border);
	border-radius: 9px;
	padding: 9px 12px;
	font-size: 13px;
	background: #fff;
}
.aipb-imp-url-in:focus { outline: none; border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-imp-url-hint { margin: 8px 0 0; font-size: 12px; color: var(--aipb-dim); line-height: 1.5; max-width: 74ch; }

.aipb-imp-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0 14px;
	color: #9aa1ad;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 600;
}
.aipb-imp-or::before, .aipb-imp-or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--aipb-line, #f0f1f4);
}

/* =============================== Versions ================================ */

.aipb-ver-take { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.aipb-ver-label {
	flex: 1 1 340px;
	max-width: 460px;
	border: 1px solid var(--aipb-border);
	border-radius: 9px;
	padding: 8px 12px;
	font-size: 13px;
}
.aipb-ver-label:focus { outline: none; border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }

.aipb-ver-list { margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--aipb-line, #f0f1f4); }
.aipb-ver-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 2px;
	border-bottom: 1px solid var(--aipb-line, #f0f1f4);
	margin: 0;
}
.aipb-ver-name { font-size: 13.5px; font-weight: 600; flex: none; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipb-ver-when { font-size: 12px; color: var(--aipb-dim); flex: 1 1 auto; min-width: 0; }
.aipb-ver-drop {
	flex: none;
	border: none; background: none;
	color: #9aa1ad;
	font-size: 17px; line-height: 1;
	padding: 3px 7px; border-radius: 6px;
	cursor: pointer;
}
.aipb-ver-drop:hover { background: rgba(179, 45, 46, .1); color: #b32d2e; }

.aipb-ver-empty, .aipb-ver-full { font-size: 12.5px; color: var(--aipb-dim); margin: 0 0 16px; }

.aipb-ver-file {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--aipb-line, #f0f1f4);
}
.aipb-ver-sep { width: 1px; height: 22px; background: var(--aipb-border); }
.aipb-ver-file input[type="file"] { font-size: 12.5px; max-width: 260px; }

/* ============================== The bottom bar ============================

   Fixed to the viewport, not sticky inside a column: on a page that is now two tall columns, the
   two actions with consequences have to be reachable from anywhere.

   The left offset tracks WordPress's own admin menu — 160px, 36px folded, gone below 782px. Those
   are core's breakpoints, copied on purpose: a bar that guesses its own left edge drifts over the
   menu the first time somebody collapses it. */

.aipb-bar {
	position: fixed;
	left: 160px;
	right: 0;
	bottom: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--aipb-border);
	box-shadow: 0 -6px 24px rgba(16, 24, 40, .07);
}
body.folded .aipb-bar { left: 36px; }
@media only screen and (max-width: 960px) { .auto-fold .aipb-bar { left: 36px; } }
@media screen and (max-width: 782px) {
	.auto-fold .aipb-bar { left: 0; }
	.aipb-bar { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
}

.aipb-bar-history { display: flex; align-items: center; gap: 6px; }

.aipb-hist {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border: 1px solid var(--aipb-border);
	border-radius: 9px;
	background: #fff;
	color: var(--aipb-ink);
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease, background .12s ease, opacity .12s ease;
}
.aipb-hist:hover:not(:disabled) { border-color: var(--aipb-accent); color: var(--aipb-accent); background: var(--aipb-accent-soft); }
.aipb-hist:focus-visible { outline: none; border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
/* Disabled means "there is nothing behind you", which is information worth reading: it dims rather
   than disappearing, so the two buttons stay tellable apart. */
.aipb-hist:disabled { opacity: .38; cursor: default; }

.aipb-hist-note { font-size: 12px; font-weight: 600; color: var(--aipb-accent); margin-left: 4px; }

.aipb-bar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.aipb-dirty {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: #a16207;
	margin-left: 8px;
}
.aipb-dirty::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
}

/* ================================ Effects ================================= */

.aipb-fx-list { display: grid; gap: 10px; }
.aipb-fx-row {
	display: grid;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--aipb-line, #e2e5ea);
	border-radius: 10px;
	background: #fff;
}
.aipb-fx-row:focus-within { border-color: var(--aipb-accent); }
.aipb-fx-row.is-shipped { background: #fafbfc; }
.aipb-fx-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.aipb-fx-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px; padding: 2px 7px; border-radius: 5px;
	background: var(--aipb-accent-soft); color: var(--aipb-accent);
	white-space: nowrap;
	display: inline-flex; align-items: center;
}
.aipb-fx-id-input {
	border: none;
	background: rgba(109, 94, 252, .12);
	border-radius: 4px;
	color: var(--aipb-accent);
	font: inherit;
	padding: 1px 4px;
	margin: 0 1px;
	width: 12ch;
}
.aipb-fx-id-input:focus { outline: 1px solid var(--aipb-accent); }
.aipb-fx-badge.is-pending { background: #fef3c7; color: #92400e; }
.aipb-fx-approve { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 2px 7px;
	border-radius: 999px;
	background: #eef1f5;
	color: var(--aipb-dim, #6b7280);
}
.aipb-fx-applies { font-size: 12px; color: var(--aipb-dim, #6b7280); }
.aipb-fx-usage { margin: 0; font-size: 12.5px; color: var(--aipb-dim, #6b7280); }
.aipb-fx-lbl { max-width: 16ch; }
.aipb-fx-applies-in { flex: 1; min-width: 12ch; }
.aipb-fx-css {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
}
.aipb-fx-drop {
	flex: none;
	margin-left: auto;
	border: none;
	background: none;
	color: var(--aipb-faint, #9aa1ad);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 5px;
	padding: 2px 7px;
}
.aipb-fx-drop:hover { background: rgba(179, 45, 46, .1); color: #b32d2e; }

/* A motion token has no little square to preview: the row is just name and value. */
.aipb-pv-none { display: none; }
.aipb-tok-row[data-kind="motion"] { grid-template-columns: 1fr; grid-template-areas: "top" "input"; }
.aipb-tok-row[data-kind="motion"] .aipb-tok-pv { display: none; }

/* =============================== Manifest ================================= */

.aipb-man-grid { display: grid; gap: 14px; }
.aipb-man-grid .aipb-label { display: block; margin-bottom: 4px; font-weight: 600; }
