/* Aura — the Settings page
   A dashboard, not a form: the figures that answer "how much have I used" come first, the service
   connection second, the preferences last. Everything scoped under .aipb-settings so nothing here
   can reach the rest of the admin. The vocabulary is the Brand page's — same accent, same ink, same
   borders — with a tighter radius and a monospace voice for the technical data. */

.aipb-settings {
	--aipb-accent: #6d5efc;
	--aipb-accent-ink: #ffffff;
	--aipb-accent-soft: rgba(109, 94, 252, 0.10);
	--aipb-ink: #1f2430;
	--aipb-dim: #6b7280;
	--aipb-faint: #9aa1ad;
	--aipb-border: #e5e7eb;
	--aipb-line: #f0f1f4;
	--aipb-surface: #ffffff;
	--aipb-sunken: #fafbfc;
	--aipb-ok: #1a7f37;
	--aipb-ok-soft: rgba(26, 127, 55, 0.10);
	--aipb-warn: #a16207;
	--aipb-warn-soft: rgba(161, 98, 7, 0.10);
	--aipb-bad: #b32d2e;
	--aipb-bad-soft: rgba(179, 45, 46, 0.10);
	--aipb-radius: 12px;
	--aipb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.06);
	--aipb-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	max-width: 1180px;
	margin-right: 20px;
	color: var(--aipb-ink);
	padding-bottom: 96px; /* room for the save bar, which floats over the end of the page */
}

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

/* --------------------------------- Header --------------------------------- */

.aipb-set-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 10px 0 14px;
}
.aipb-settings h1 {
	font-size: 26px;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	letter-spacing: -0.01em;
}

/* ---------------------------------- Badge ---------------------------------- */

.aipb-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 11px 6px 9px;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
}
.aipb-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.aipb-badge-ok   { color: var(--aipb-ok);   background: var(--aipb-ok-soft);   border-color: rgba(26, 127, 55, 0.22); }
.aipb-badge-warn { color: var(--aipb-warn); background: var(--aipb-warn-soft); border-color: rgba(161, 98, 7, 0.22); }
.aipb-badge-bad  { color: var(--aipb-bad);  background: var(--aipb-bad-soft);  border-color: rgba(179, 45, 46, 0.22); }
.aipb-badge-idle { color: var(--aipb-dim);  background: #f3f4f6;               border-color: var(--aipb-border); }
.aipb-badge-plain { padding-left: 11px; }
.aipb-badge-plain::before { display: none; }

/* A live badge stays quiet until it has something to say. */
.aipb-badge-ok.is-pulsing::before { animation: aipb-pulse 1.6s ease-in-out infinite; }
@keyframes aipb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .aipb-badge-ok.is-pulsing::before { animation: none; } }

/* ------------------------------- The info note ------------------------------ */

.aipb-note {
	border: 1px solid var(--aipb-border);
	border-radius: var(--aipb-radius);
	background: var(--aipb-sunken);
	margin: 0 0 22px;
	max-width: 100%;
}
.aipb-note > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aipb-dim);
	border-radius: var(--aipb-radius);
}
.aipb-note > summary::-webkit-details-marker { display: none; }
.aipb-note > summary:hover { color: var(--aipb-ink); }
.aipb-note > summary:focus-visible { outline: 2px solid var(--aipb-accent); outline-offset: -2px; }
.aipb-note-icon {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--aipb-accent-soft);
	color: var(--aipb-accent);
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, serif;
}
.aipb-note-chev { margin-left: auto; transition: transform .15s ease; color: var(--aipb-faint); }
.aipb-note[open] .aipb-note-chev { transform: rotate(180deg); }
.aipb-note-body {
	padding: 0 14px 14px 41px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--aipb-dim);
	max-width: 80ch;
}
.aipb-note-body b { color: var(--aipb-ink); font-weight: 600; }

/* -------------------------------- Sections --------------------------------- */

.aipb-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--aipb-faint);
	margin: 30px 0 12px;
}
.aipb-section-label:first-of-type { margin-top: 0; }

.aipb-card {
	background: var(--aipb-surface);
	border: 1px solid var(--aipb-border);
	border-radius: var(--aipb-radius);
	box-shadow: var(--aipb-shadow);
	padding: 20px 22px;
	margin: 0 0 16px;
}
.aipb-card h2 { font-size: 16px; margin: 0 0 16px; padding: 0; }

/* ------------------------------ Metric cards -------------------------------- */

.aipb-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	margin: 0 0 16px;
}
.aipb-metric {
	background: var(--aipb-surface);
	border: 1px solid var(--aipb-border);
	border-radius: var(--aipb-radius);
	box-shadow: var(--aipb-shadow);
	padding: 16px 18px 17px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 118px;
}
.aipb-metric-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--aipb-faint);
}
.aipb-metric-value {
	font-size: 30px;
	line-height: 1.05;
	font-weight: 650;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.aipb-metric-value.is-tight { gap: 1px; }
/* A plan is a name, not a quantity: at 30px it shouts, and it is not the loudest thing here. */
.aipb-metric-value.is-text { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.aipb-metric-value small {
	font-size: 14px;
	font-weight: 500;
	color: var(--aipb-faint);
	letter-spacing: 0;
}
.aipb-metric-sub {
	font-size: 12.5px;
	color: var(--aipb-dim);
	margin-top: auto;
	font-variant-numeric: tabular-nums;
}
.aipb-metric-sub code {
	background: none;
	padding: 0;
	font-family: var(--aipb-mono);
	font-size: 12px;
	color: var(--aipb-dim);
}

.aipb-meter {
	height: 6px;
	border-radius: 999px;
	background: #eceef2;
	overflow: hidden;
	margin-top: auto;
}
.aipb-meter > i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--aipb-accent);
	transition: width .4s ease;
}
.aipb-meter.is-warn > i { background: var(--aipb-warn); }
.aipb-meter.is-bad  > i { background: var(--aipb-bad); }

/* --------------------------------- The log ---------------------------------- */

.aipb-log-wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.aipb-log {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.aipb-log th {
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--aipb-faint);
	padding: 0 14px 9px 0;
	border-bottom: 1px solid var(--aipb-border);
	white-space: nowrap;
}
.aipb-log td {
	padding: 10px 14px 10px 0;
	border-bottom: 1px solid var(--aipb-line);
	vertical-align: middle;
	color: var(--aipb-ink);
}
.aipb-log tr:last-child td { border-bottom: none; }
.aipb-log tbody tr:hover td { background: var(--aipb-sunken); }
.aipb-log th:last-child, .aipb-log td:last-child { padding-right: 0; }
.aipb-log .aipb-when { color: var(--aipb-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.aipb-log .aipb-who { color: var(--aipb-dim); white-space: nowrap; }

/* The kind of generation, coloured: it is the one column read by scanning. */
.aipb-kind {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 650;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 6px;
	background: #f3f4f6;
	color: var(--aipb-dim);
	white-space: nowrap;
}
.aipb-kind-section   { background: rgba(26, 127, 55, .10);  color: #14672c; }
.aipb-kind-patch     { background: var(--aipb-accent-soft); color: #5546e0; }
.aipb-kind-direction { background: rgba(29, 100, 200, .10); color: #1d64c8; }
.aipb-kind-plan      { background: rgba(161, 98, 7, .10);   color: var(--aipb-warn); }
.aipb-kind-global    { background: rgba(179, 45, 46, .09);  color: var(--aipb-bad); }

/* The request id: a quiet chip that turns into a copy button on hover. */
.aipb-req {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--aipb-mono);
	font-size: 11.5px;
	color: var(--aipb-dim);
	background: var(--aipb-sunken);
	border: 1px solid var(--aipb-border);
	border-radius: 6px;
	padding: 4px 7px;
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease, background .12s ease;
	max-width: 100%;
}
.aipb-req:hover { border-color: var(--aipb-accent); color: var(--aipb-accent); background: var(--aipb-accent-soft); }
.aipb-req:focus-visible { outline: 2px solid var(--aipb-accent); outline-offset: 1px; }
.aipb-req > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aipb-req > svg { flex: none; opacity: .6; }
.aipb-req.is-copied { border-color: rgba(26, 127, 55, .3); background: var(--aipb-ok-soft); color: var(--aipb-ok); }
.aipb-row > .aipb-req { height: 38px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }

.aipb-foot {
	font-size: 12.5px;
	color: var(--aipb-faint);
	margin: 14px 0 0;
	line-height: 1.5;
	max-width: 80ch;
}
.aipb-empty {
	font-size: 13.5px;
	color: var(--aipb-dim);
	margin: 0;
	padding: 22px 0;
	text-align: center;
}

/* -------------------------------- The fields -------------------------------- */

.aipb-field { display: flex; flex-direction: column; gap: 8px; }
.aipb-field + .aipb-field { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--aipb-line); }
.aipb-label { font-size: 13.5px; font-weight: 600; }
.aipb-hint {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--aipb-dim);
	margin: 0;
	max-width: 80ch;
}
.aipb-hint b { color: var(--aipb-ink); font-weight: 600; }

.aipb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* The key input. It is a password field that will never show its content: it reads as a slot. */
.aipb-settings input[type="password"].aipb-key {
	flex: 1 1 320px;
	min-width: 240px;
	max-width: 460px;
	height: 38px;
	font-family: var(--aipb-mono);
	font-size: 13px;
	letter-spacing: .04em;
	border: 1px solid var(--aipb-border);
	border-radius: 9px;
	padding: 0 12px;
	background: var(--aipb-surface);
	color: var(--aipb-ink);
	box-shadow: none;
}
.aipb-settings input[type="password"].aipb-key:focus {
	border-color: var(--aipb-accent);
	box-shadow: 0 0 0 3px var(--aipb-accent-soft);
	outline: none;
}
.aipb-settings input[type="password"].aipb-key::placeholder { color: var(--aipb-faint); letter-spacing: 0; }

/* The buttons: one shape, three weights. */
.aipb-settings .aipb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 38px;
	padding: 0 15px;
	border-radius: 9px;
	border: 1px solid var(--aipb-border);
	background: var(--aipb-surface);
	color: var(--aipb-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
.aipb-settings .aipb-btn:hover { border-color: #c9cdd6; background: var(--aipb-sunken); color: var(--aipb-ink); }
.aipb-settings .aipb-btn:focus-visible { outline: none; border-color: var(--aipb-accent); box-shadow: 0 0 0 3px var(--aipb-accent-soft); }
.aipb-settings .aipb-btn[disabled] { opacity: .55; cursor: default; }

.aipb-settings .aipb-btn-primary {
	background: var(--aipb-accent);
	border-color: var(--aipb-accent);
	color: var(--aipb-accent-ink);
	padding: 0 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.aipb-settings .aipb-btn-primary:hover { background: #5b4ce8; border-color: #5b4ce8; color: var(--aipb-accent-ink); }

.aipb-settings .aipb-btn-ghost { color: var(--aipb-accent); border-color: rgba(109, 94, 252, .28); }
.aipb-settings .aipb-btn-ghost:hover { color: var(--aipb-accent); background: var(--aipb-accent-soft); border-color: var(--aipb-accent); }

.aipb-settings .aipb-btn-danger { color: var(--aipb-bad); }
.aipb-settings .aipb-btn-danger:hover { color: var(--aipb-bad); background: var(--aipb-bad-soft); border-color: rgba(179, 45, 46, .3); }

/* Removing the key is a checkbox — the form needs the field — dressed as a button that stays
   pressed. No JavaScript: the state is the checkbox's own, so it survives a failed submit. */
.aipb-clear { position: absolute; opacity: 0; pointer-events: none; }
.aipb-clear + label { user-select: none; }
.aipb-clear:focus-visible + label { border-color: var(--aipb-bad); box-shadow: 0 0 0 3px var(--aipb-bad-soft); }
.aipb-clear:checked + label {
	background: var(--aipb-bad);
	border-color: var(--aipb-bad);
	color: #fff;
}
.aipb-clear:checked + label:hover { background: #9c2728; color: #fff; }
.aipb-clear-warn { display: none; font-size: 12.5px; color: var(--aipb-bad); font-weight: 600; }
.aipb-clear:checked ~ .aipb-clear-warn { display: inline; }

/* The outcome of Check. */
.aipb-check-out { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.aipb-check-out.is-ok  { color: var(--aipb-ok); }
.aipb-check-out.is-bad { color: var(--aipb-bad); }
.aipb-check-out.is-busy { color: var(--aipb-dim); font-weight: 500; }

/* The language select, with the globe standing in for a label at a glance. */
.aipb-select-wrap { position: relative; display: inline-flex; align-items: center; max-width: 380px; width: 100%; }
.aipb-select-wrap .aipb-globe { position: absolute; left: 12px; color: var(--aipb-faint); pointer-events: none; }
.aipb-select-wrap .aipb-chev { position: absolute; right: 12px; color: var(--aipb-faint); pointer-events: none; }
.aipb-settings select.aipb-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 38px;
	padding: 0 36px 0 38px;
	border: 1px solid var(--aipb-border);
	border-radius: 9px;
	background: var(--aipb-surface);
	color: var(--aipb-ink);
	font-size: 13.5px;
	line-height: 36px;
	box-shadow: none;
	cursor: pointer;
	max-width: none;
}
.aipb-settings select.aipb-select:focus {
	border-color: var(--aipb-accent);
	box-shadow: 0 0 0 3px var(--aipb-accent-soft);
	outline: none;
}

/* ------------------------------- The save bar ------------------------------- */

.aipb-savebar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin: 18px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--aipb-border);
	border-radius: var(--aipb-radius);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(8px);
	box-shadow: 0 -1px 2px rgba(16, 24, 40, .03), 0 8px 24px rgba(16, 24, 40, .08);
}
.aipb-savebar-note { font-size: 12.5px; color: var(--aipb-dim); margin-right: auto; }

@media (max-width: 782px) {
	.aipb-settings { margin-right: 12px; }
	.aipb-metric-value { font-size: 26px; }
	.aipb-savebar { flex-wrap: wrap; }
}
