/* --------------------------------------------------------------- Palette */

/*
 * Executive Black foundation. Dark is the identity, not a preference, so it is
 * the default rather than something behind a media query.
 *
 * Contrast was measured, not eyeballed. Two consequences worth knowing before
 * changing anything here:
 *   - Electric Blue #3B82F6 carries a WHITE label at only 3.68:1, which fails.
 *     Filled buttons therefore use an Executive Black label on the blue
 *     (5.23:1), which keeps the brand colour exact and passes.
 *   - Interactive borders are #5C6A7D, the lightest-but-one step that still
 *     clears 3:1 on both surfaces. Decorative rules can be much darker.
 */

.aiba-app {
	/* Brand constants, identical in every theme. */
	--aiba-blue: #3B82F6;
	--aiba-cyan: #22D3EE;
	--aiba-sweep: linear-gradient(100deg, #3B82F6 0%, #22D3EE 100%);

	--aiba-bg: #0B0F14;
	--aiba-surface: #151B23;
	--aiba-surface-2: #1C2430;
	--aiba-border: #232C3A;
	--aiba-border-strong: #5C6A7D;
	--aiba-text: #F5F7FA;
	--aiba-muted: #94A3B8;
	--aiba-accent: #3B82F6;
	--aiba-accent-text: #0B0F14;
	--aiba-accent-soft: rgba(59, 130, 246, 0.14);
	--aiba-success: #34D399;
	--aiba-warning: #FBBF24;
	--aiba-danger: #F87171;

	--aiba-radius: 12px;
	--aiba-radius-sm: 8px;
	--aiba-gap: 20px;
	--aiba-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
	--aiba-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.36);

	--aiba-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--aiba-font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	background: var(--aiba-bg);
	box-sizing: border-box;
	color: var(--aiba-text);
	font-family: var(--aiba-font);
	font-size: 16px;
	line-height: 1.6;
	max-width: 1080px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

/*
 * Light sections. #94A3B8 drops to 2.41:1 here and Electric Blue to 3.46:1,
 * so both are replaced rather than reused.
 */
.aiba-t-light {
	--aiba-bg: #FFFFFF;
	--aiba-surface: #F7F8FA;
	--aiba-surface-2: #EEF1F5;
	--aiba-border: #E2E6EC;
	--aiba-border-strong: #96A1B0;
	--aiba-text: #0B0F14;
	--aiba-muted: #5A6675;
	--aiba-accent: #2563EB;
	--aiba-accent-text: #FFFFFF;
	--aiba-accent-soft: #EFF6FF;
	--aiba-success: #047857;
	--aiba-warning: #B45309;
	--aiba-danger: #DC2626;
	--aiba-shadow: 0 1px 2px rgba(11, 15, 20, 0.06), 0 8px 24px rgba(11, 15, 20, 0.06);
	--aiba-shadow-lift: 0 2px 4px rgba(11, 15, 20, 0.08), 0 16px 40px rgba(11, 15, 20, 0.1);
}

/* Only the 'auto' theme defers to the visitor's system setting. */
@media (prefers-color-scheme: light) {
	.aiba-t-auto {
		--aiba-bg: #FFFFFF;
		--aiba-surface: #F7F8FA;
		--aiba-surface-2: #EEF1F5;
		--aiba-border: #E2E6EC;
		--aiba-border-strong: #96A1B0;
		--aiba-text: #0B0F14;
		--aiba-muted: #5A6675;
		--aiba-accent: #2563EB;
		--aiba-accent-text: #FFFFFF;
		--aiba-accent-soft: #EFF6FF;
		--aiba-success: #047857;
		--aiba-warning: #B45309;
		--aiba-danger: #DC2626;
		--aiba-shadow: 0 1px 2px rgba(11, 15, 20, 0.06), 0 8px 24px rgba(11, 15, 20, 0.06);
		--aiba-shadow-lift: 0 2px 4px rgba(11, 15, 20, 0.08), 0 16px 40px rgba(11, 15, 20, 0.1);
	}
}

.aiba-app h1,
.aiba-app h2,
.aiba-app h3,
.aiba-app h4 {
	font-family: var(--aiba-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.aiba-app *,
.aiba-app *::before,
.aiba-app *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------ Hero */

.aiba-hero {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	padding: 32px;
	margin-bottom: var(--aiba-gap);
}

.aiba-hero__greeting {
	color: var(--aiba-muted);
	font-size: 0.95rem;
	margin: 0 0 4px;
}

.aiba-hero__title {
	color: var(--aiba-text);
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.2;
	margin: 0 0 20px;
}

.aiba-intake__input {
	background: var(--aiba-bg);
	border: 1px solid var(--aiba-border-strong);
	border-radius: var(--aiba-radius);
	color: var(--aiba-text);
	display: block;
	font: inherit;
	padding: 16px 18px;
	resize: vertical;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	width: 100%;
}

.aiba-intake__input:focus {
	border-color: var(--aiba-accent);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px var(--aiba-accent-soft);
}

.aiba-intake__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 12px;
}

.aiba-intake__thread {
	margin-top: 20px;
}

/* --------------------------------------------------------------- Buttons */

/*
 * overflow-wrap and word-break are reset here, not left to inherit.
 *
 * The app renders inside the host page's content area, and a theme is
 * entitled to set a wrapping rule on that area -- ComunityQ sets
 * `overflow-wrap: anywhere` on .entry-content and .cq-main so that long URLs
 * in a post cannot push the layout sideways. That declaration inherits into
 * every descendant, buttons included, and on a button it does real damage:
 * `anywhere` lets the browser break a word at any character AND counts those
 * breaks when it works out the element's minimum content width, which
 * collapses to a single character. A short label in a tight flex row then
 * renders broken across two lines -- "Add" on the task form came out as
 * "Ad" over "d".
 *
 * The flex rules on .aiba-newtask keep the button from being squeezed, but
 * they cannot undo an inherited wrapping mode, so the reset belongs on every
 * button rather than on the two forms where it was first noticed. It sits in
 * this stylesheet rather than the ComunityQ bridge because the bridge only
 * loads when the app is set to follow the theme.
 */
.aiba-btn {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border-strong);
	border-radius: var(--aiba-radius-sm);
	color: var(--aiba-text);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-family: var(--aiba-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	overflow-wrap: normal;
	padding: 11px 18px;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
	word-break: normal;
}

.aiba-app :focus-visible {
	outline: 2px solid var(--aiba-blue);
	outline-offset: 2px;
}

/* Anchors styled as buttons must restate colour and decoration on hover, or the
   host theme's a:hover rule repaints them. */
.aiba-btn:hover,
.aiba-btn:focus-visible {
	background: var(--aiba-border);
	color: var(--aiba-text);
	text-decoration: none;
}

.aiba-btn[disabled] {
	cursor: default;
	opacity: 0.55;
}

/* White on #3B82F6 is 3.68:1 and fails; Executive Black on it is 5.23:1. The
   label colour is a token so the light theme can flip it back to white on its
   deeper blue. */
.aiba-btn--primary {
	background: var(--aiba-accent);
	border-color: var(--aiba-accent);
	color: var(--aiba-accent-text);
	font-weight: 700;
}

.aiba-btn--primary:hover,
.aiba-btn--primary:focus-visible {
	background: var(--aiba-accent);
	border-color: var(--aiba-accent);
	color: var(--aiba-accent-text);
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* The signature sweep, kept for the one or two moments that earn it. */
.aiba-btn--sweep {
	background: var(--aiba-sweep);
	border-color: transparent;
	color: #0B0F14;
	font-weight: 700;
}

.aiba-btn--sweep:hover,
.aiba-btn--sweep:focus-visible {
	background: var(--aiba-sweep);
	color: #0B0F14;
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.aiba-btn--ghost {
	background: transparent;
	border-color: var(--aiba-border-strong);
	color: var(--aiba-text);
}

.aiba-btn--ghost:hover,
.aiba-btn--ghost:focus-visible {
	background: var(--aiba-surface-2);
	color: var(--aiba-text);
}

.aiba-btn--small {
	font-size: 0.85rem;
	padding: 6px 10px;
}

.aiba-input {
	background: var(--aiba-bg);
	border: 1px solid var(--aiba-border-strong);
	border-radius: var(--aiba-radius-sm);
	color: var(--aiba-text);
	font: inherit;
	padding: 11px 14px;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
	width: 100%;
}

.aiba-input::placeholder {
	color: var(--aiba-muted);
	opacity: 1;
}

.aiba-input:focus {
	border-color: var(--aiba-blue);
	box-shadow: 0 0 0 3px var(--aiba-accent-soft);
	outline: none;
}

/* ----------------------------------------------------------------- Stats */

.aiba-stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	margin-bottom: var(--aiba-gap);
}

.aiba-stat {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	padding: 16px;
}

.aiba-stat__value {
	color: var(--aiba-text);
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.aiba-stat__label {
	color: var(--aiba-muted);
	font-size: 0.85rem;
}

.aiba-stat.is-alert .aiba-stat__value {
	color: var(--aiba-danger);
}

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

.aiba-section {
	margin-bottom: 28px;
}

.aiba-section__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.aiba-section__title {
	color: var(--aiba-text);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.aiba-section__head .aiba-section__title {
	margin: 0;
}

.aiba-briefing {
	background: var(--aiba-accent-soft);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin-bottom: var(--aiba-gap);
	padding: 20px 24px;
}

.aiba-briefing p {
	margin: 0 0 8px;
}

.aiba-briefing__focus {
	font-weight: 600;
}

/* -------------------------------------------------------------- Projects */

.aiba-projects {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.aiba-card {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
}

.aiba-card__title {
	color: var(--aiba-text);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
}

.aiba-card__title a {
	color: inherit;
	text-decoration: none;
}

.aiba-card__title a:hover {
	text-decoration: underline;
}

.aiba-card__meta {
	color: var(--aiba-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85rem;
	gap: 10px;
}

.aiba-card__next {
	color: var(--aiba-muted);
	font-size: 0.9rem;
}

.aiba-card__next strong {
	color: var(--aiba-text);
	font-weight: 600;
}

.aiba-progress {
	background: var(--aiba-surface-2);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.aiba-progress__bar {
	background: var(--aiba-accent);
	display: block;
	height: 100%;
}

/* --------------------------------------------------------------- Badges */

.aiba-badge {
	border: 1px solid var(--aiba-border);
	border-radius: 999px;
	color: var(--aiba-muted);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 2px 10px;
	text-transform: uppercase;
}

.aiba-badge--urgent,
.aiba-badge--overdue {
	border-color: var(--aiba-danger);
	color: var(--aiba-danger);
}

.aiba-badge--high {
	border-color: var(--aiba-warning);
	color: var(--aiba-warning);
}

.aiba-badge--completed {
	border-color: var(--aiba-success);
	color: var(--aiba-success);
}

/* ----------------------------------------------------------------- Tasks */

.aiba-tasklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-task {
	align-items: flex-start;
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius-sm);
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
	padding: 12px 14px;
}

.aiba-task__check {
	flex: 0 0 auto;
	height: 18px;
	margin-top: 4px;
	width: 18px;
}

.aiba-task__body {
	flex: 1 1 auto;
	min-width: 0;
}

.aiba-task__title {
	color: var(--aiba-text);
	font-weight: 600;
	margin: 0;
}

.aiba-task.is-done .aiba-task__title {
	color: var(--aiba-muted);
	text-decoration: line-through;
}

.aiba-task__desc {
	color: var(--aiba-muted);
	font-size: 0.9rem;
	margin: 4px 0 0;
}

.aiba-task__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.aiba-task__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

.aiba-newtask {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

/*
 * Who gives way in these two rows. .aiba-input carries width:100% for the
 * stacked forms it is mostly used in, and in a flex row that reads as a claim
 * on the whole line -- so the input took the width and the button, which is
 * shrinkable by default, was squeezed down onto its padding until "Add" had
 * nowhere to sit.
 *
 * So the input is the part that flexes and the button is the part that does
 * not. min-width:0 is the half that is easy to miss: a flex item will not
 * shrink below its own content unless it is told it may, and without it the
 * input goes on pushing the button out on a narrow screen.
 */
.aiba-newtask .aiba-input,
.aiba-chat__form .aiba-input {
	flex: 1 1 auto;
	min-width: 0;
}

.aiba-newtask .aiba-btn,
.aiba-chat__form .aiba-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ------------------------------------------------------------- Workspace */

.aiba-workspace__head {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin-bottom: 16px;
	padding: 24px;
}

.aiba-workspace__title {
	color: var(--aiba-text);
	font-size: clamp(1.3rem, 2.5vw, 1.8rem);
	margin: 0 0 6px;
}

.aiba-workspace__objective {
	color: var(--aiba-muted);
	margin: 0 0 14px;
}

.aiba-workspace__back {
	color: var(--aiba-muted);
	display: inline-block;
	font-size: 0.9rem;
	margin-bottom: 10px;
	text-decoration: none;
}

.aiba-tabs {
	border-bottom: 1px solid var(--aiba-border);
	display: flex;
	gap: 4px;
	margin-bottom: 18px;
	overflow-x: auto;
}

.aiba-tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--aiba-muted);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 10px 14px;
	white-space: nowrap;
}

.aiba-tab:hover {
	color: var(--aiba-text);
}

.aiba-tab.is-active {
	border-bottom-color: var(--aiba-accent);
	color: var(--aiba-text);
}

.aiba-panel {
	display: none;
}

.aiba-panel.is-active {
	display: block;
}

.aiba-panel__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.aiba-summary {
	background: var(--aiba-accent-soft);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius-sm);
	margin-bottom: 14px;
	padding: 16px;
}

/* ------------------------------------------------------------------ Chat */

.aiba-chat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
	max-height: 460px;
	overflow-y: auto;
	padding-right: 4px;
}

.aiba-msg {
	border-radius: var(--aiba-radius-sm);
	max-width: 85%;
	padding: 12px 14px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.aiba-msg--user {
	align-self: flex-end;
	background: var(--aiba-accent);
	color: var(--aiba-accent-text);
}

.aiba-msg--assistant {
	align-self: flex-start;
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	color: var(--aiba-text);
}

.aiba-chat__form {
	display: flex;
	gap: 8px;
}

.aiba-questions {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius-sm);
	margin: 12px 0;
	padding: 16px;
}

.aiba-questions ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.aiba-questions li {
	margin-bottom: 6px;
}

.aiba-questions__why {
	color: var(--aiba-muted);
	display: block;
	font-size: 0.85rem;
}

/*
 * One question, one box. The number sits in the margin rather than inline so
 * the questions still read as a short list rather than a form to fill in.
 */
.aiba-question {
	margin-bottom: 18px;
}

.aiba-question:last-of-type {
	margin-bottom: 14px;
}

.aiba-question__label {
	align-items: baseline;
	color: var(--aiba-text);
	display: flex;
	font-size: 0.98rem;
	font-weight: 600;
	gap: 10px;
	line-height: 1.4;
	margin-bottom: 4px;
}

.aiba-question__number {
	background: var(--aiba-surface-2);
	border-radius: 999px;
	color: var(--aiba-muted);
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 20px;
	min-width: 20px;
	text-align: center;
}

.aiba-question__why {
	color: var(--aiba-muted);
	font-size: 0.85rem;
	line-height: 1.45;
	margin: 0 0 6px 30px;
}

.aiba-question__input {
	/* Stated rather than inherited: a full-width control that loses
	   border-box overflows its card, and this one is always full width. */
	box-sizing: border-box;
	width: 100%;
}

.aiba-question--extra .aiba-question__label {
	font-weight: 500;
}

.aiba-question__note {
	color: var(--aiba-muted);
	font-size: 0.82rem;
	line-height: 1.4;
}

/* The extra box is optional, so it sits apart from the real questions. */
.aiba-question--extra {
	border-top: 1px solid var(--aiba-border);
	padding-top: 14px;
}

/*
 * Scoped, because the shared .aiba-intake__actions is right-aligned and the
 * skip hint belongs beside the button, reading left to right after it.
 */
.aiba-questions .aiba-intake__actions {
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
}

.aiba-proposal {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-accent);
	border-radius: var(--aiba-radius);
	margin: 14px 0;
	padding: 20px;
}

.aiba-proposal__title {
	color: var(--aiba-text);
	font-size: 1.15rem;
	margin: 0 0 6px;
}

.aiba-proposal__objective {
	color: var(--aiba-muted);
	margin: 0 0 14px;
}

.aiba-proposal ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.aiba-proposal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* -------------------------------------------------------------- Activity */

.aiba-activity {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-activity li {
	border-bottom: 1px solid var(--aiba-border);
	color: var(--aiba-text);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 10px 0;
}

.aiba-activity time {
	color: var(--aiba-muted);
	flex: 0 0 auto;
	font-size: 0.85rem;
}

.aiba-note {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius-sm);
	margin-bottom: 10px;
	padding: 16px;
}

.aiba-note__title {
	color: var(--aiba-text);
	font-size: 1rem;
	margin: 0 0 6px;
}

/* ---------------------------------------------------------------- Notices */

.aiba-notice,
.aiba-empty {
	background: var(--aiba-surface, #f8fafc);
	border: 1px solid var(--aiba-border, #e2e8f0);
	border-radius: 12px;
	color: var(--aiba-muted, #64748b);
	padding: 20px;
	text-align: center;
}

.aiba-toast {
	background: var(--aiba-text);
	border-radius: var(--aiba-radius-sm);
	bottom: 24px;
	color: var(--aiba-bg);
	left: 50%;
	padding: 12px 18px;
	position: fixed;
	transform: translateX(-50%);
	z-index: 9999;
}

.aiba-toast--error {
	background: var(--aiba-danger);
	color: #ffffff;
}

.aiba-toast__action {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.aiba-toast__action:hover,
.aiba-toast__action:focus-visible {
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- Billing */

.aiba-billing__head {
	margin-bottom: var(--aiba-gap);
}

.aiba-currentplan {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin-bottom: var(--aiba-gap);
	padding: 18px 22px;
}

.aiba-currentplan p {
	margin: 0 0 10px;
}

.aiba-plans {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.aiba-plan {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
}

.aiba-plan.is-current {
	border-color: var(--aiba-accent);
}

.aiba-plan__name {
	color: var(--aiba-text);
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0;
}

.aiba-plan__price {
	color: var(--aiba-text);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0;
}

.aiba-plan__desc {
	color: var(--aiba-muted);
	font-size: 0.9rem;
	margin: 0;
}

.aiba-plan__limits {
	color: var(--aiba-muted);
	flex: 1 1 auto;
	font-size: 0.9rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-plan__limits li {
	padding: 3px 0 3px 18px;
	position: relative;
}

.aiba-plan__limits li::before {
	color: var(--aiba-success);
	content: '✓';
	left: 0;
	position: absolute;
}

.aiba-billing__foot {
	color: var(--aiba-muted);
	font-size: 0.85rem;
	margin-top: 16px;
}

.aiba-is-busy {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 640px) {
	.aiba-hero {
		padding: 22px;
	}

	.aiba-msg {
		max-width: 95%;
	}

	.aiba-task {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------- Account screens */

.aiba-auth {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin: 0 auto;
	max-width: 460px;
	padding: 32px;
}

.aiba-auth__head {
	margin-bottom: 24px;
}

.aiba-auth__title {
	color: var(--aiba-text);
	font-size: clamp(1.3rem, 3vw, 1.75rem);
	line-height: 1.2;
	margin: 0 0 6px;
}

.aiba-auth__sub {
	color: var(--aiba-muted);
	margin: 0;
}

.aiba-auth__alt {
	border-top: 1px solid var(--aiba-border);
	color: var(--aiba-muted);
	font-size: 0.92rem;
	margin: 24px 0 0;
	padding-top: 16px;
	text-align: center;
}

.aiba-auth__alt a {
	color: var(--aiba-accent);
}

.aiba-auth__sep {
	color: var(--aiba-border);
	margin: 0 6px;
}

/* --------------------------------------------------------------- Forms */

.aiba-field {
	margin: 0 0 18px;
}

.aiba-label {
	color: var(--aiba-text);
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.aiba-field__hint {
	color: var(--aiba-muted);
	display: block;
	font-size: 0.85rem;
	margin-top: 6px;
}

.aiba-field--check {
	color: var(--aiba-text);
	font-size: 0.92rem;
}

.aiba-field--check label {
	align-items: flex-start;
	display: flex;
	gap: 8px;
}

.aiba-field--check a {
	color: var(--aiba-accent);
}

.aiba-input:focus-visible,
.aiba-intake__input:focus-visible {
	border-color: var(--aiba-accent);
	outline: 2px solid var(--aiba-accent);
	outline-offset: 1px;
}

select.aiba-input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-right: 36px;
}

.aiba-btn--block {
	display: block;
	padding: 12px 16px;
	width: 100%;
}

/* Off-screen rather than display:none -- a bot that skips hidden fields is
   exactly the one this is meant to catch. */
.aiba-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.aiba-alert {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-danger);
	border-radius: var(--aiba-radius-sm);
	color: var(--aiba-text);
	margin-bottom: 20px;
	padding: 12px 16px;
}

.aiba-alert ul {
	margin: 0;
	padding-left: 18px;
}

.aiba-alert li + li {
	margin-top: 4px;
}

.aiba-alert a {
	color: var(--aiba-accent);
}

.aiba-linkbtn {
	background: none;
	border: 0;
	color: var(--aiba-muted);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

.aiba-linkbtn:hover,
.aiba-linkbtn:focus-visible {
	color: var(--aiba-text);
}

/* ---------------------------------------------------------- Onboarding */

.aiba-onboarding {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin: 0 auto;
	max-width: 640px;
	padding: 32px;
}

.aiba-onboarding__lede {
	color: var(--aiba-muted);
	margin: 0 0 24px;
}

.aiba-steps {
	border-top: 1px solid var(--aiba-border);
	counter-reset: aiba-step;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0 0 28px;
	padding: 16px 0 0;
}

.aiba-steps li {
	align-items: center;
	color: var(--aiba-muted);
	counter-increment: aiba-step;
	display: flex;
	font-size: 0.9rem;
	gap: 8px;
}

.aiba-steps li::before {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	border-radius: 50%;
	color: var(--aiba-muted);
	content: counter(aiba-step);
	display: grid;
	font-size: 0.8rem;
	font-weight: 700;
	height: 24px;
	place-items: center;
	width: 24px;
}

.aiba-steps li.is-active {
	color: var(--aiba-text);
	font-weight: 600;
}

.aiba-steps li.is-active::before {
	background: var(--aiba-accent);
	border-color: var(--aiba-accent);
	color: var(--aiba-accent-text);
}

.aiba-steps li.is-done::before {
	background: var(--aiba-accent-soft);
	border-color: var(--aiba-accent);
	color: var(--aiba-accent);
	content: "\2713";
}

.aiba-step {
	border: 0;
	display: none;
	margin: 0;
	padding: 0;
}

.aiba-step.is-active {
	display: block;
}

.aiba-onboarding__nav {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 8px;
}

.aiba-onboarding__skip {
	margin: 16px 0 0;
	text-align: center;
}

.aiba-onboarding.is-complete .aiba-onboarding__head {
	margin-bottom: 0;
}

@media (max-width: 540px) {
	.aiba-auth,
	.aiba-onboarding {
		padding: 24px 20px;
	}

	.aiba-onboarding__nav {
		flex-direction: column-reverse;
	}

	.aiba-onboarding__nav .aiba-btn {
		width: 100%;
	}
}

/* ---------------------------------------------- Profile draft (wizard) */

.aiba-draft {
	background: var(--aiba-accent-soft);
	border: 1px solid var(--aiba-border);
	border-left: 3px solid var(--aiba-accent);
	border-radius: var(--aiba-radius-sm);
	margin: 0 0 20px;
	padding: 12px 16px;
}

.aiba-draft__text {
	color: var(--aiba-text);
	font-size: 0.9rem;
	margin: 0;
}

.aiba-draft .aiba-linkbtn {
	font-size: 0.85rem;
	margin-top: 8px;
}

.aiba-draft.is-busy .aiba-draft__text::after {
	animation: aiba-draft-dots 1.2s steps(4, end) infinite;
	content: "";
}

@keyframes aiba-draft-dots {
	0% { content: ""; }
	25% { content: "."; }
	50% { content: ".."; }
	75% { content: "..."; }
}

@media (prefers-reduced-motion: reduce) {
	.aiba-draft.is-busy .aiba-draft__text::after {
		animation: none;
		content: "";
	}
}

/* -------------------------------------------- Website field (wizard) */

.aiba-inputgroup {
	display: flex;
	gap: 8px;
}

.aiba-inputgroup .aiba-input {
	flex: 1 1 auto;
	min-width: 0;
}

.aiba-inputgroup .aiba-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.aiba-inputgroup {
		flex-direction: column;
	}
}

/* =================================================== Marketing landing page */

.aiba-marketing {
	max-width: 1120px;
}

.aiba-marketing__section {
	padding: 56px 0;
}

.aiba-marketing__h2 {
	color: var(--aiba-text);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	line-height: 1.2;
	margin: 0 0 8px;
	text-align: center;
}

.aiba-marketing__lede {
	color: var(--aiba-muted);
	margin: 0 auto 32px;
	max-width: 46ch;
	text-align: center;
}

.aiba-marketing__h2 + .aiba-featgrid,
.aiba-marketing__h2 + .aiba-whogrid,
.aiba-marketing__h2 + .aiba-howto,
.aiba-marketing__h2 + .aiba-faq {
	margin-top: 32px;
}

/* ------------------------------------------------------------------- Hero */

.aiba-lead {
	padding: 56px 0 16px;
	text-align: center;
}

.aiba-lead__eyebrow {
	color: var(--aiba-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.aiba-lead__title {
	color: var(--aiba-text);
	font-size: clamp(1.9rem, 5vw, 3.1rem);
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0 auto 16px;
	max-width: 18ch;
}

.aiba-lead__sub {
	color: var(--aiba-muted);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	margin: 0 auto 28px;
	max-width: 60ch;
}

.aiba-lead__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 0 0 12px;
}

.aiba-lead__note {
	color: var(--aiba-muted);
	font-size: 0.9rem;
	margin: 0 0 40px;
}

.aiba-lead__note a {
	color: var(--aiba-accent);
}

.aiba-btn--lg {
	font-size: 1.05rem;
	padding: 14px 28px;
}

/* --------------------------------------------------------- Product mockup */

.aiba-mock {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin: 0 auto;
	max-width: 640px;
	padding: 24px;
	text-align: left;
}

.aiba-mock__bubble {
	border-radius: var(--aiba-radius-sm);
	font-size: 0.95rem;
	margin-bottom: 12px;
	max-width: 88%;
	padding: 12px 16px;
}

.aiba-mock__bubble--user {
	background: var(--aiba-accent);
	color: var(--aiba-accent-text);
	margin-left: auto;
}

.aiba-mock__bubble--ai {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	color: var(--aiba-text);
}

.aiba-mock__tasks {
	background: var(--aiba-bg);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius-sm);
	margin-top: 16px;
	padding: 16px 20px;
}

.aiba-mock__tasks-title {
	color: var(--aiba-text);
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.aiba-mock__tasks ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-mock__tasks li {
	color: var(--aiba-muted);
	font-size: 0.9rem;
	padding: 6px 0 6px 26px;
	position: relative;
}

.aiba-mock__tasks li::before {
	border: 1.5px solid var(--aiba-border);
	border-radius: 4px;
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	top: 9px;
	width: 14px;
}

/* -------------------------------------------------------------- How it works */

.aiba-steps-band {
	border-bottom: 1px solid var(--aiba-border);
	border-top: 1px solid var(--aiba-border);
	padding: 56px 0;
}

.aiba-howto {
	counter-reset: aiba-howto;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-howto li {
	counter-increment: aiba-howto;
	padding-top: 44px;
	position: relative;
}

.aiba-howto li::before {
	background: var(--aiba-accent-soft);
	border-radius: 50%;
	color: var(--aiba-accent);
	content: counter(aiba-howto);
	display: grid;
	font-weight: 700;
	height: 32px;
	left: 0;
	place-items: center;
	position: absolute;
	top: 0;
	width: 32px;
}

.aiba-howto h3,
.aiba-feat h3 {
	color: var(--aiba-text);
	font-size: 1.02rem;
	margin: 0 0 6px;
}

.aiba-howto p,
.aiba-feat p {
	color: var(--aiba-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* ----------------------------------------------------------------- Features */

.aiba-featgrid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.aiba-feat {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	box-shadow: var(--aiba-shadow);
	padding: 26px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.aiba-feat:hover {
	border-color: var(--aiba-border-strong);
	box-shadow: var(--aiba-shadow-lift);
	transform: translateY(-2px);
}

/* ----------------------------------------------------------------- Audience */

.aiba-whogrid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-whogrid li {
	border-left: 3px solid var(--aiba-accent);
	color: var(--aiba-muted);
	font-size: 0.95rem;
	padding: 4px 0 4px 16px;
}

.aiba-whogrid strong {
	color: var(--aiba-text);
	display: block;
	margin-bottom: 2px;
}

/* ------------------------------------------------------------------ Pricing */

.aiba-pricegrid {
	align-items: start;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.aiba-plan {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	display: flex;
	flex-direction: column;
	padding: 24px;
}

.aiba-plan.is-featured {
	border-color: var(--aiba-accent);
	box-shadow: 0 0 0 1px var(--aiba-accent);
}

.aiba-plan__flag {
	color: var(--aiba-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.aiba-plan__name {
	color: var(--aiba-text);
	font-size: 1.05rem;
	margin: 0 0 6px;
}

.aiba-plan__price {
	color: var(--aiba-text);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 8px;
}

.aiba-plan__per {
	color: var(--aiba-muted);
	font-size: 0.9rem;
	font-weight: 400;
}

.aiba-plan__desc {
	color: var(--aiba-muted);
	font-size: 0.92rem;
	margin: 0 0 16px;
}

.aiba-plan__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.aiba-plan__list li {
	color: var(--aiba-text);
	font-size: 0.92rem;
	padding: 5px 0 5px 22px;
	position: relative;
}

.aiba-plan__list li::before {
	color: var(--aiba-accent);
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
}

.aiba-plan .aiba-btn {
	margin-top: auto;
}

/* --------------------------------------------------------------------- FAQ */

.aiba-faq {
	margin: 0 auto;
	max-width: 720px;
}

.aiba-faq details {
	border-bottom: 1px solid var(--aiba-border);
	padding: 4px 0;
}

.aiba-faq summary {
	color: var(--aiba-text);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	padding: 16px 28px 16px 0;
	position: relative;
}

.aiba-faq summary::-webkit-details-marker {
	display: none;
}

.aiba-faq summary::after {
	color: var(--aiba-muted);
	content: "+";
	font-size: 1.3rem;
	line-height: 1;
	position: absolute;
	right: 4px;
	top: 16px;
}

.aiba-faq details[open] summary::after {
	content: "\2212";
}

.aiba-faq p {
	color: var(--aiba-muted);
	margin: 0 0 18px;
	padding-right: 28px;
}

/* ---------------------------------------------------------------- Final CTA */

.aiba-cta {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin-bottom: 40px;
	padding: 48px 24px;
	text-align: center;
}

.aiba-cta__title {
	color: var(--aiba-text);
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 0 0 8px;
}

.aiba-cta__sub {
	color: var(--aiba-muted);
	margin: 0 0 24px;
}

@media (max-width: 640px) {
	.aiba-lead {
		padding-top: 32px;
	}

	.aiba-marketing__section,
	.aiba-steps-band {
		padding: 40px 0;
	}

	.aiba-lead__actions .aiba-btn {
		width: 100%;
	}
}


/* ============================================== How it works (guide page) */

.aiba-guide__lead {
	padding: 56px 0 8px;
	text-align: center;
}

.aiba-guide__title {
	color: var(--aiba-text);
	font-size: clamp(1.8rem, 4.4vw, 2.8rem);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 auto 16px;
	max-width: 22ch;
}

.aiba-guide__lede {
	color: var(--aiba-muted);
	margin: 0 auto 28px;
	max-width: 62ch;
}

/* The band gives the middle of a long page somewhere to breathe. */
.aiba-guide__band {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	padding: 48px 32px;
}

/* ------------------------------------------------------- Ask/Plan/Execute */

.aiba-flow {
	counter-reset: none;
	display: grid;
	gap: 0;
	list-style: none;
	margin: 32px auto 0;
	max-width: 46em;
	padding: 0;
}

.aiba-flow__step {
	border-top: 1px solid var(--aiba-border);
	display: grid;
	gap: 20px;
	grid-template-columns: 48px 1fr;
	padding: 26px 0;
}

.aiba-flow__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.aiba-flow__num {
	align-items: center;
	background: var(--aiba-accent-soft);
	border-radius: 50%;
	color: var(--aiba-accent);
	display: flex;
	font-size: 1.05rem;
	font-weight: 700;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.aiba-flow__body h3 {
	color: var(--aiba-text);
	font-size: 1.15rem;
	margin: 6px 0 8px;
}

.aiba-flow__body p {
	color: var(--aiba-muted);
	margin: 0;
}

/* ------------------------------------------------------------- What it makes */

.aiba-doclist {
	display: grid;
	gap: 18px 28px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-doclist li {
	border-top: 2px solid var(--aiba-accent);
	padding-top: 12px;
}

.aiba-doclist strong {
	color: var(--aiba-text);
	display: block;
	margin-bottom: 4px;
}

.aiba-doclist span {
	color: var(--aiba-muted);
	font-size: 0.95rem;
}

/* ----------------------------------------------------------------- Playbook */

.aiba-playbook {
	counter-reset: aiba-tip;
	display: grid;
	gap: 22px 32px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.aiba-playbook li {
	counter-increment: aiba-tip;
	padding-left: 42px;
	position: relative;
}

.aiba-playbook li::before {
	color: var(--aiba-accent);
	content: counter( aiba-tip, decimal-leading-zero );
	font-size: 0.9rem;
	font-weight: 700;
	left: 0;
	letter-spacing: 0.04em;
	position: absolute;
	top: 2px;
}

.aiba-playbook h3 {
	color: var(--aiba-text);
	font-size: 1.02rem;
	margin: 0 0 6px;
}

.aiba-playbook p {
	color: var(--aiba-muted);
	font-size: 0.95rem;
	margin: 0;
}

/* ---------------------------------------------------------------- Scenarios */

.aiba-scenarios {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.aiba-scenario {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	padding: 24px;
}

.aiba-scenario__ask {
	color: var(--aiba-text);
	font-weight: 600;
	margin: 0 0 10px;
}

.aiba-scenario__got {
	border-left: 3px solid var(--aiba-accent);
	color: var(--aiba-muted);
	font-size: 0.95rem;
	margin: 0;
	padding-left: 14px;
}

@media (max-width: 640px) {
	.aiba-guide__lead {
		padding-top: 32px;
	}

	.aiba-guide__band {
		padding: 32px 18px;
	}

	.aiba-flow__step {
		gap: 14px;
		grid-template-columns: 38px 1fr;
	}

	.aiba-flow__num {
		font-size: 0.95rem;
		height: 36px;
		width: 36px;
	}
}

/* -------------------------------------- Guide: sub-heads, prose and bullets */

.aiba-guide__sub {
	color: var(--aiba-accent);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 auto 28px;
	max-width: 46ch;
	text-align: center;
}

.aiba-guide__sub--small {
	color: var(--aiba-muted);
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	margin: 44px auto 20px;
	text-transform: uppercase;
}

.aiba-prose {
	margin: 0 auto;
	max-width: 58ch;
}

.aiba-prose p {
	color: var(--aiba-muted);
	margin: 0 0 16px;
}

.aiba-prose p:last-child {
	margin-bottom: 0;
}

/* The "here is the problem" paragraph, set back from the answer that follows. */
.aiba-prose__quiet {
	border-left: 3px solid var(--aiba-border);
	padding-left: 16px;
}

.aiba-prose__punch {
	color: var(--aiba-text);
	font-weight: 600;
}

/* The bullets under a step: short enough to read as chips, not as a list. */
.aiba-flow__eg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.aiba-flow__eg li {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	border-radius: 999px;
	color: var(--aiba-muted);
	font-size: 0.9rem;
	padding: 6px 14px;
}

/* One idea per line, two columns where there is room for them. */
.aiba-ticks {
	display: grid;
	gap: 10px 28px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 0 auto 28px;
	max-width: 760px;
	padding: 0;
}

.aiba-ticks li {
	color: var(--aiba-text);
	padding-left: 28px;
	position: relative;
}

.aiba-ticks li::before {
	color: var(--aiba-accent);
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 0;
}

/* ------------------------------------------------------- Prompt vs outcome */

.aiba-compare {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 0 auto 32px;
	max-width: 860px;
}

.aiba-compare__panel {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	padding: 22px 24px;
}

.aiba-compare__panel--after {
	border-color: var(--aiba-accent);
}

.aiba-compare__label {
	color: var(--aiba-muted);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.aiba-compare__quote {
	color: var(--aiba-text);
	font-size: 1.05rem;
	line-height: 1.45;
	margin: 0;
}

.aiba-verdict {
	display: grid;
	gap: 4px;
	margin: 32px auto 0;
	max-width: 48ch;
	text-align: center;
}

.aiba-verdict__them {
	color: var(--aiba-muted);
}

.aiba-verdict__us {
	color: var(--aiba-text);
	font-size: 1.1rem;
	font-weight: 700;
}

.aiba-cta__kicker {
	color: var(--aiba-muted);
	margin: 0 0 14px;
}

@media (max-width: 640px) {
	.aiba-ticks {
		grid-template-columns: 1fr;
	}

	.aiba-compare__panel {
		padding: 18px;
	}

	.aiba-guide__sub--small {
		margin-top: 32px;
	}
}

/* ==================================================== Documents (workspace) */

.aiba-docform {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin-bottom: var(--aiba-gap);
	padding: 20px;
}

.aiba-docform__row {
	display: grid;
	gap: 16px;
	grid-template-columns: 2fr 1fr;
}

.aiba-docform__row .aiba-field {
	display: block;
	margin: 0;
}

.aiba-docform__hint {
	color: var(--aiba-muted);
	font-size: 0.88rem;
	margin: 0 0 16px;
	min-height: 1.3em;
}

.aiba-docform__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.aiba-docform__cost {
	color: var(--aiba-muted);
	font-size: 0.85rem;
	margin-left: auto;
}

.aiba-docform__revising {
	background: var(--aiba-accent-soft);
	border-left: 3px solid var(--aiba-accent);
	border-radius: var(--aiba-radius-sm);
	color: var(--aiba-text);
	font-size: 0.9rem;
	margin: 0 0 16px;
	padding: 10px 14px;
}

.aiba-doc {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	margin-bottom: 12px;
	overflow: hidden;
}

.aiba-doc__head {
	align-items: flex-start;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 16px 20px;
}

.aiba-doc__ident {
	min-width: 0;
}

.aiba-doc__title {
	color: var(--aiba-text);
	font-size: 1rem;
	margin: 0 0 6px;
}

.aiba-doc__meta {
	align-items: center;
	color: var(--aiba-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: 8px;
	margin: 0;
}

.aiba-doc__body {
	border-top: 1px solid var(--aiba-border);
	padding: 20px;
}

.aiba-doc__content {
	color: var(--aiba-text);
	max-height: 60vh;
	overflow-y: auto;
}

.aiba-doc__content h1,
.aiba-doc__content h2,
.aiba-doc__content h3,
.aiba-doc__content h4 {
	color: var(--aiba-text);
	line-height: 1.25;
	margin: 20px 0 8px;
}

.aiba-doc__content h1 { font-size: 1.3rem; }
.aiba-doc__content h2 { font-size: 1.12rem; }
.aiba-doc__content h3 { font-size: 1rem; }

.aiba-doc__content h1:first-child,
.aiba-doc__content h2:first-child,
.aiba-doc__content h3:first-child {
	margin-top: 0;
}

.aiba-doc__content p,
.aiba-doc__content li {
	color: var(--aiba-text);
	font-size: 0.95rem;
}

.aiba-doc__content p {
	margin: 0 0 12px;
}

.aiba-doc__content ul,
.aiba-doc__content ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

.aiba-doc__content li {
	margin-bottom: 4px;
}

.aiba-doc__content code {
	background: var(--aiba-surface-2);
	border-radius: 4px;
	font-size: 0.88em;
	padding: 1px 5px;
}

.aiba-doc__content a {
	color: var(--aiba-accent);
}

/* A table in a document is usually a calendar, and calendars are wide. */
.aiba-doc__content table {
	border-collapse: collapse;
	display: block;
	margin: 0 0 14px;
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
}

.aiba-doc__content td {
	border: 1px solid var(--aiba-border);
	font-size: 0.88rem;
	padding: 7px 10px;
}

.aiba-doc__content tr:first-child td {
	background: var(--aiba-surface-2);
	font-weight: 600;
}

/*
 * A workbook preview: one table per tab, each scrolling on its own so a wide
 * tracker does not drag the whole panel sideways.
 */
.aiba-doc__scroll {
	margin: 0 0 16px;
	max-width: 100%;
	overflow-x: auto;
}

.aiba-doc__scroll table {
	border-collapse: collapse;
	display: table;
	margin: 0;
	overflow: visible;
	white-space: nowrap;
	width: auto;
}

.aiba-doc__scroll th {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	color: var(--aiba-text);
	font-size: 0.88rem;
	font-weight: 600;
	padding: 7px 10px;
	text-align: left;
	vertical-align: top;
}

.aiba-doc__scroll th small {
	color: var(--aiba-muted);
	display: block;
	font-weight: 400;
	margin-top: 2px;
	white-space: normal;
}

.aiba-doc__scroll td {
	border: 1px solid var(--aiba-border);
	font-size: 0.88rem;
	padding: 7px 10px;
	vertical-align: top;
}

/* The heading row here is a th, so the rule above must not shade the data. */
.aiba-doc__scroll tbody tr:first-child td {
	background: transparent;
	font-weight: 400;
}

/* Generated images, shown under the document they belong to. */
.aiba-doc__images:empty {
	display: none;
}

.aiba-gallery {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	margin: 16px 0 8px;
}

.aiba-gallery__item {
	margin: 0;
}

.aiba-gallery__item img {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	border-radius: 8px;
	display: block;
	height: auto;
	width: 100%;
}

.aiba-gallery__item figcaption {
	color: var(--aiba-muted);
	font-size: 0.8rem;
	line-height: 1.4;
	margin-top: 6px;
}

.aiba-doc__note {
	color: var(--aiba-muted);
	font-size: 0.85rem;
	margin: 8px 0 0;
}

/*
 * Job progress. The stage text is the part that matters -- it is the server
 * saying what it is doing -- so the bar stays quiet underneath it.
 *
 * The class is .aiba-working, not .aiba-progress, and the rename is a fix
 * rather than tidying. .aiba-progress was already taken by the thin
 * completion pill on a project card -- height: 6px, overflow: hidden -- and
 * this block only ever set `margin`, so the job indicator inherited that
 * height and that clipping from a component it has nothing to do with.
 *
 * Everything inside it was cut off six pixels down: the stage text saying
 * what the server was doing, the elapsed seconds, and worst of all the
 * sentence explaining a failure along with its Try again button. The bar is
 * itself 6px, so it was the one part that still showed -- which is exactly
 * why the indicator looked like a bar that reached a point and then did
 * nothing.
 *
 * Two components must not share a root class. Renaming one is what stops this
 * returning; adding `height: auto` here would have left the trap in place for
 * whoever writes the next .aiba-progress rule.
 */
.aiba-working {
	margin: 14px 0 4px;
}

.aiba-working__track {
	background: var(--aiba-surface-2);
	border-radius: 999px;
	height: 6px;
	margin-bottom: 10px;
	overflow: hidden;
}

.aiba-working__fill {
	background: var(--aiba-accent);
	border-radius: 999px;
	height: 100%;
	transition: width 400ms ease;
	width: 6%;
}

.aiba-working__stage {
	color: var(--aiba-muted);
	font-size: 0.9rem;
	margin: 0;
}

/*
 * The elapsed count sits under the stage, smaller and dimmer: it is there to
 * be glanced at by somebody wondering whether anything is happening, not read
 * by somebody waiting. It appears only after five seconds -- see startWorking()
 * -- so on an ordinary request it never shows at all.
 */
.aiba-working__meta {
	color: var(--aiba-muted);
	font-size: 0.78rem;
	margin: 4px 0 0;
	opacity: 0.75;
}

/*
 * The same element, once the work has failed. It stops pulsing -- nothing is
 * happening any more -- and stops being quiet: this is the sentence that
 * explains why nothing appeared, and it stays on the page until the customer
 * acts on it.
 */
/*
 * The failure box sizes to whatever it has to say. That text comes from the
 * server or from the provider, so it can be one sentence or a paragraph with
 * a documentation URL in it: height is never assumed, and a long unbroken URL
 * wraps instead of pushing the box wider than the card it sits in.
 */
.aiba-working--failed {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-danger);
	border-radius: 10px;
	height: auto;
	overflow: visible;
	overflow-wrap: anywhere;
	padding: 12px 14px;
}

.aiba-working--failed .aiba-working__stage {
	animation: none;
	color: var(--aiba-text);
	margin-bottom: 10px;
}

/*
 * The stage text already ends in an ellipsis, so it needs movement rather than
 * more punctuation: a slow fade is enough to say the page has not frozen, and
 * it still reads if the customer has reduced motion turned on.
 */
.aiba-working__stage {
	animation: aiba-working-breathe 2.2s ease-in-out infinite;
}

@keyframes aiba-working-breathe {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
	.aiba-working__stage {
		animation: none;
	}

	.aiba-working__fill {
		transition: none;
	}
}

.aiba-doc__editor {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.6;
	min-height: 320px;
	resize: vertical;
}

.aiba-doc__actions {
	border-top: 1px solid var(--aiba-border);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
}

@media (max-width: 600px) {
	.aiba-docform__row {
		grid-template-columns: 1fr;
	}

	.aiba-doc__head {
		flex-direction: column;
	}

	.aiba-docform__cost {
		margin-left: 0;
	}
}

/* ======================================================= Brand components */

.aiba-navbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	padding: 22px 0;
}

.aiba-lockup {
	align-items: center;
	color: var(--aiba-text);
	display: inline-flex;
	gap: 10px;
	text-decoration: none;
}

.aiba-lockup:hover,
.aiba-lockup:focus-visible {
	color: var(--aiba-text);
	text-decoration: none;
}

.aiba-lockup:focus-visible {
	border-radius: 6px;
	outline: 2px solid var(--aiba-accent, #3B82F6);
	outline-offset: 6px;
}

.aiba-lockup__word {
	font-family: var(--aiba-font-display);
	font-size: 1.06rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.aiba-mark {
	display: block;
	flex: 0 0 auto;
	/* Same curve as the Clouse Designs header mark: a slow settle that
	   overshoots very slightly, which reads as a wing lifting rather than as a
	   UI element animating. */
	transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pointer only. On a touch screen :hover sticks after a tap, leaving the mark
   tilted until something else is touched -- which looks like a rendering bug,
   not an effect. */
@media (hover: hover) and (pointer: fine) {
	.aiba-lockup:hover .aiba-mark {
		transform: rotate(-6deg) scale(1.04);
	}
}

/* Keyboard users get it on every device, so this stays outside the query
   above. */
.aiba-lockup:focus-visible .aiba-mark {
	transform: rotate(-6deg) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.aiba-mark {
		transition: none;
	}
}

.aiba-navbar__links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.aiba-navbar__links a:not(.aiba-btn) {
	color: var(--aiba-muted);
	font-size: 0.93rem;
	text-decoration: none;
}

.aiba-navbar__links a:not(.aiba-btn):hover {
	color: var(--aiba-text);
}

/* --------------------------------------------------------- The ask box */

.aiba-ask {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border-strong);
	border-radius: 16px;
	box-shadow: var(--aiba-shadow);
	margin: 0 auto;
	max-width: 680px;
	padding: 10px 10px 12px;
	position: relative;
	text-align: left;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.aiba-ask:focus-within {
	border-color: var(--aiba-blue);
	box-shadow: var(--aiba-shadow-lift), 0 0 0 4px var(--aiba-accent-soft);
}

.aiba-ask__input {
	background: transparent;
	border: 0;
	color: var(--aiba-text);
	display: block;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.5;
	padding: 14px 14px 6px;
	resize: none;
	width: 100%;
}

.aiba-ask__input:focus {
	box-shadow: none;
	outline: none;
}

.aiba-ask__foot {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 0 4px 0 14px;
}

.aiba-ask__hint {
	color: var(--aiba-muted);
	font-size: 0.85rem;
	margin: 0;
}

.aiba-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 18px auto 0;
	max-width: 680px;
	padding: 0;
}

.aiba-chip {
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	border-radius: 999px;
	color: var(--aiba-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
	padding: 7px 14px;
	transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.aiba-chip:hover,
.aiba-chip:focus-visible {
	background: var(--aiba-accent-soft);
	border-color: var(--aiba-blue);
	color: var(--aiba-text);
}

/* The caret that follows the demo typing. */
.aiba-ask__caret {
	background: var(--aiba-blue);
	display: inline-block;
	height: 1.15em;
	margin-left: 1px;
	vertical-align: text-bottom;
	width: 2px;
	animation: aiba-blink 1.05s step-end infinite;
}

@keyframes aiba-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

/* ------------------------------------------------------ Ask. Plan. Execute */

.aiba-triad {
	counter-reset: aiba-triad;
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.aiba-triad li {
	counter-increment: aiba-triad;
	padding-top: 20px;
	position: relative;
}

.aiba-triad li::before {
	background: var(--aiba-sweep);
	border-radius: 999px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 40px;
}

.aiba-triad h3 {
	color: var(--aiba-text);
	font-size: 1.3rem;
	margin: 0 0 8px;
}

.aiba-triad p {
	color: var(--aiba-muted);
	margin: 0;
}

/* ------------------------------------------------------------ Disciplines */

.aiba-disciplines {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.aiba-discipline {
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	padding: 22px;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.aiba-discipline:hover {
	border-color: var(--aiba-border-strong);
	transform: translateY(-2px);
}

.aiba-discipline h3 {
	color: var(--aiba-text);
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.aiba-discipline p {
	color: var(--aiba-muted);
	font-size: 0.93rem;
	margin: 0;
}

@media (max-width: 600px) {
	.aiba-navbar {
		justify-content: center;
	}

	.aiba-ask__foot {
		align-items: stretch;
		flex-direction: column;
	}

	.aiba-ask__go {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiba-app *,
	.aiba-app *::before,
	.aiba-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ------------------------------------------------- Painting the whole page */

/*
 * The app container carries its own background, but the page around it belongs
 * to the theme. On a light theme that leaves a dark column floating in white,
 * which reads as broken rather than branded -- so pages hosting the app get
 * painted to match. Switchable off in Settings -> Brand for sites that would
 * rather keep their own chrome.
 */

body.aiba-paint--executive,
body.aiba-paint--auto {
	background-color: #0B0F14;
	color: #F5F7FA;
}

@media (prefers-color-scheme: light) {
	body.aiba-paint--auto {
		background-color: #FFFFFF;
		color: #0B0F14;
	}
}

body.aiba-paint--light {
	background-color: #FFFFFF;
	color: #0B0F14;
}

/* The container has already painted itself; a second fill just costs a repaint
   and defeats any full-bleed section the page may want. */
body.aiba-paint .aiba-app {
	background: transparent;
}

/* ------------------------------------------- Sitting flush to the page top */

/*
 * A theme's blank or full-width template still wraps the content in its own
 * container -- vertical padding, and the page-title header even where the
 * title itself is hidden. On a page whose whole job is to be this app, that
 * reads as a band of empty space where the site header used to be, and it
 * cannot be edited away from the Landing Page screen because it is not the
 * plugin's markup.
 *
 * So the ancestors of the app container, and only on a page that hosts it,
 * give up their vertical spacing. Horizontal padding is left alone: that is
 * the theme's gutter, and taking it away would push the page against the edge
 * of a phone screen.
 *
 * Opt-in from Settings -> Brand, because a page that still shows a real theme
 * header wants that gap.
 */

/* !important is not decoration here: a Bootstrap theme's spacing utilities
   (.py-5 and friends) are themselves !important, and this rule exists to beat
   exactly those. */
body.aiba-flush :has(.aiba-app) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* The page title is the theme's, and the app has a header of its own. Hidden
   rather than unstyled, because a heading with its own margin left behind is
   the same gap in a smaller size. */
body.aiba-flush :is(.entry-header, .page-header, .cq-page-header) {
	display: none !important;
}

/* ComunityQ prints its front-page widget area whether or not a widget is in
   it, which is another 48px of padding above the app. It sits BESIDE the app's
   wrapper rather than above it in the tree, so the ancestor rule cannot reach
   it and :has() may not be nested to select a preceding sibling by content.
   Hence one named selector -- and only where the area really is empty. */
body.aiba-flush .cq-front-hero-widgets:not(:has(.widget)) {
	display: none !important;
}

body.aiba-flush .aiba-app {
	margin-top: 0;
}

/* ------------------------------------------------------------------ Team */

/* The workspace bar sits above everything and stays quiet: it is orientation,
   not navigation, and on a one-workspace account it is not there at all. */
.aiba-app .aiba-workspacebar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--aiba-border);
	font-size: 0.875rem;
}

.aiba-app .aiba-workspacebar__label {
	color: var(--aiba-muted);
}

.aiba-app .aiba-workspacebar__select {
	width: auto;
	min-width: 12rem;
	padding: 0.35rem 0.6rem;
	font-size: 0.875rem;
}

.aiba-app .aiba-workspacebar__link {
	margin-left: auto;
	color: var(--aiba-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.aiba-app .aiba-workspacebar__link:hover,
.aiba-app .aiba-workspacebar__link:focus {
	color: var(--aiba-text);
	border-bottom-color: currentColor;
}

.aiba-app .aiba-team__seats {
	color: var(--aiba-muted);
	margin: 0 0 1.5rem;
}

.aiba-app .aiba-team__invite {
	margin-bottom: 2rem;
	padding: 1.25rem;
	background: var(--aiba-surface);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
}

.aiba-app .aiba-team__inviterow {
	display: flex;
	gap: 0.75rem;
	align-items: flex-end;
	flex-wrap: wrap;
}

.aiba-app .aiba-team__inviterow .aiba-field {
	flex: 1 1 14rem;
	margin: 0;
}

.aiba-app .aiba-team__inviterow .aiba-field:nth-child(2) {
	flex: 0 0 9rem;
}

.aiba-app .aiba-memberlist {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius);
	overflow: hidden;
}

.aiba-app .aiba-member {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 1.1rem;
	background: var(--aiba-surface);
	border-bottom: 1px solid var(--aiba-border);
}

.aiba-app .aiba-member:last-child {
	border-bottom: 0;
}

.aiba-app .aiba-member--pending {
	background: var(--aiba-surface-2);
}

.aiba-app .aiba-member__who {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1 auto;
}

.aiba-app .aiba-member__name {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aiba-app .aiba-member__meta {
	color: var(--aiba-muted);
	font-size: 0.8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aiba-app .aiba-member__role-label {
	color: var(--aiba-muted);
	font-size: 0.8125rem;
	flex: 0 0 auto;
}

.aiba-app .aiba-member__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 0 0 auto;
}

/* A role dropdown next to a name is a control, not a form field, so it drops
   to the size of its content rather than filling the row. */
.aiba-app .aiba-member__role {
	width: auto;
	padding: 0.3rem 0.5rem;
	font-size: 0.8125rem;
}

/* The row's own role label is redundant once the dropdown is showing it. */
.aiba-app .aiba-member__actions .aiba-member__role ~ * {
	margin-left: 0;
}

.aiba-app .aiba-invitebanner {
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem;
	background: var(--aiba-surface-2);
	border: 1px solid var(--aiba-border);
	border-radius: var(--aiba-radius-sm);
}

.aiba-app .aiba-invitebanner p {
	margin: 0;
}

.aiba-app .aiba-invitebanner__hint {
	margin-top: 0.35rem !important;
	color: var(--aiba-muted);
	font-size: 0.875rem;
}

@media (max-width: 640px) {
	.aiba-app .aiba-member {
		flex-wrap: wrap;
	}

	.aiba-app .aiba-member__actions {
		width: 100%;
		justify-content: flex-end;
	}
}