/*
 * AI BotKit — the agent card and the Deploy dialog (plan U13).
 *
 * These two surfaces use AI BotKit's look, not WordPress admin styling (plan Key Decision,
 * "The plugin's card and Deploy dialog use AI BotKit's look"). They are a plain-CSS port of the
 * lab prototype (KTD17):
 *   saas/src/app/(dev)/lab/prototypes/wordpress-simple-onboarding/_components/Dashboard.tsx (AgentCard)
 *   saas/src/app/(dev)/lab/prototypes/wordpress-onboarding-journey/_components/proposed/DeployDialog.tsx
 *   saas/src/app/(dev)/lab/prototypes/wordpress-simple-onboarding/_components/DisplayRules.tsx
 *   saas/src/app/(dev)/lab/prototypes/wordpress-onboarding-journey/_components/shared/StatusPill.tsx
 * Tailwind classes are written out as their Tailwind v4 values; the comment on each rule names
 * the classes it ports.
 *
 * COLOURS, RADII AND SHADOWS ARE COPIED FROM saas/src/app/globals.css (light theme) into the
 * custom properties below and used only through them. globals.css is the source of truth: if a
 * value changes there, change it here, and nowhere else in this file.
 *
 * Everything is scoped under `.abk` and written as `.abk .abk-x` (two classes), so WordPress
 * admin's own element rules (forms.css: `.wp-core-ui select`, `input[type=checkbox]`) don't leak in.
 */

/*
 * Manrope, AI BotKit's font (globals.css --font-sans), shipped with the plugin so the card and dialog
 * match the app without a request to a font CDN. Variable weights 200-800, the same latin and
 * latin-ext subsets the app serves through next/font. SIL Open Font License 1.1: admin/fonts/OFL.txt.
 */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.abk {
    /* globals.css :root — light theme */
    --abk-background: oklch(1 0 0);
    --abk-foreground: oklch(0.153 0.006 107.1);
    --abk-card: oklch(1 0 0);
    --abk-popover: oklch(1 0 0);
    --abk-popover-foreground: oklch(0.153 0.006 107.1);
    --abk-primary: oklch(0.153 0.006 107.118);
    --abk-primary-foreground: oklch(0.988 0.003 106.448);
    --abk-primary-hover: oklch(0.228 0.013 107.388);
    --abk-muted: oklch(0.966 0.005 106.5);
    --abk-muted-foreground: oklch(0.54 0.031 107.3);
    --abk-accent: oklch(0.966 0.005 106.5);
    --abk-accent-foreground: oklch(0.228 0.013 107.4);
    --abk-destructive: oklch(0.543 0.174 29.697);
    --abk-border: oklch(0.93 0.007 106.5);
    --abk-input: oklch(0.93 0.007 106.5);
    --abk-ring: oklch(0.553 0.125 159.846);
    --abk-brand: oklch(0.553 0.125 159.846);
    --abk-brand-hover: oklch(0.481 0.110 159.461);
    --abk-brand-subtle: oklch(0.971 0.029 159.953);
    --abk-brand-strong: oklch(0.481 0.110 159.461);
    --abk-warning: oklch(0.482 0.093 74.070);
    --abk-warning-subtle: oklch(0.949 0.027 90.907);
    --abk-error: oklch(0.486 0.132 29.218);
    --abk-white: oklch(1 0 0);

    /* globals.css radius ladder: --radius 0.45rem, sm ×0.6, md ×0.8, lg ×1, xl ×1.4 */
    --abk-radius: 0.45rem;
    --abk-radius-sm: calc(var(--abk-radius) * 0.6);
    --abk-radius-md: calc(var(--abk-radius) * 0.8);
    --abk-radius-lg: var(--abk-radius);
    --abk-radius-xl: calc(var(--abk-radius) * 1.4);

    /* globals.css shadows */
    --abk-shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.06);
    --abk-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --abk-shadow-md: 0 2px 6px -1px rgb(0 0 0 / 0.10), 0 1px 3px -1px rgb(0 0 0 / 0.08);
    --abk-shadow-lg: 0 6px 12px -2px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.08);

    /* globals.css --font-sans; Manrope is shipped in admin/fonts (see @font-face above) */
    --abk-font-sans: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --abk-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    font-family: var(--abk-font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--abk-foreground);
    -webkit-font-smoothing: antialiased;
}

.abk *,
.abk *::before,
.abk *::after {
    box-sizing: border-box;
}

.abk h2,
.abk h3,
.abk p,
.abk ul,
.abk li {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.abk ul {
    list-style: none;
}

.abk .abk-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    pointer-events: none;
}

.abk .abk-icon--sm {
    width: 0.875rem;
    height: 0.875rem;
}

.abk .abk-muted {
    color: var(--abk-muted-foreground);
}

.abk .abk-spin {
    animation: abk-spin 1s linear infinite;
}

@keyframes abk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------ buttons
 * components/ui/button.tsx: inline-flex items-center justify-center gap-2 whitespace-nowrap
 * rounded-md text-sm font-medium transition-all disabled:opacity-50 [&_svg]:size-4 shrink-0
 * focus-visible:ring-2 ring-ring.
 * size default h-9 px-4 py-2 has-[>svg]:px-3 · sm h-8 gap-1.5 px-3 has-[>svg]:px-2.5 · icon size-9 */
.abk .abk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    height: 2.25rem;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--abk-radius-md);
    background: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-btn:has(> svg) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.abk .abk-btn--sm {
    height: 2rem;
    gap: 0.375rem;
    padding: 0 0.75rem;
}

.abk .abk-btn--sm:has(> svg) {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}

.abk .abk-btn--icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.abk .abk-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.abk .abk-btn:focus,
.abk .abk-btn:focus-visible {
    outline: none;
}

.abk .abk-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--abk-ring), var(--abk-shadow-xs);
}

/* variant default: bg-primary text-primary-foreground shadow-xs hover:bg-primary-hover */
.abk .abk-btn--default,
.abk .abk-btn--default:visited {
    background: var(--abk-primary);
    color: var(--abk-primary-foreground);
    box-shadow: var(--abk-shadow-xs);
}

.abk .abk-btn--default:hover {
    background: var(--abk-primary-hover);
    color: var(--abk-primary-foreground);
}

/* variant brand: bg-brand text-white shadow-xs hover:bg-brand-hover */
.abk .abk-btn--brand,
.abk .abk-btn--brand:visited {
    background: var(--abk-brand);
    color: var(--abk-white);
    box-shadow: var(--abk-shadow-xs);
}

.abk .abk-btn--brand:hover {
    background: var(--abk-brand-hover);
    color: var(--abk-white);
}

/* WordPress recolours a:focus; keep each variant's own text colour. */
.abk .abk-btn--brand:focus {
    color: var(--abk-white);
}

.abk .abk-btn--outline:focus {
    color: var(--abk-foreground);
}

/* variant outline: border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground */
.abk .abk-btn--outline,
.abk .abk-btn--outline:visited {
    border-color: var(--abk-border);
    background: var(--abk-background);
    color: var(--abk-foreground);
    box-shadow: var(--abk-shadow-xs);
}

.abk .abk-btn--outline:hover {
    background: var(--abk-accent);
    color: var(--abk-accent-foreground);
}

/* variant ghost: hover:bg-accent hover:text-accent-foreground */
.abk .abk-btn--ghost {
    color: var(--abk-foreground);
}

.abk .abk-btn--ghost:hover {
    background: var(--abk-accent);
    color: var(--abk-accent-foreground);
}

/* variant destructive: bg-destructive text-white shadow-xs hover:bg-destructive/90 */
.abk .abk-btn--destructive {
    background: var(--abk-destructive);
    color: var(--abk-white);
    box-shadow: var(--abk-shadow-xs);
}

.abk .abk-btn--destructive:hover {
    background: color-mix(in oklab, var(--abk-destructive) 90%, transparent);
}

.abk .abk-btn--destructive:focus-visible {
    box-shadow: 0 0 0 2px var(--abk-destructive), var(--abk-shadow-xs);
}

.abk .abk-flex-1 {
    flex: 1 1 0%;
    min-width: 0;
}

.abk .abk-btn--block {
    width: 100%;
}

/* ------------------------------------------------------------------ status pill
 * StatusPill.tsx: inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs
 * font-semibold · Active bg-brand-subtle text-brand-strong, dot bg-brand · Inactive
 * bg-warning-subtle text-warning, dot bg-warning · dot size-1.5 rounded-full.
 * "Status unknown" is not drawn in the prototype (KTD17 delta): neutral muted wash. */
.abk .abk-pill {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}

.abk .abk-pill-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
}

.abk .abk-pill--active {
    background: var(--abk-brand-subtle);
    color: var(--abk-brand-strong);
}

.abk .abk-pill--active .abk-pill-dot {
    background: var(--abk-brand);
}

.abk .abk-pill--inactive {
    background: var(--abk-warning-subtle);
    color: var(--abk-warning);
}

.abk .abk-pill--inactive .abk-pill-dot {
    background: var(--abk-warning);
}

.abk .abk-pill--unknown {
    background: var(--abk-muted);
    color: var(--abk-muted-foreground);
}

.abk .abk-pill--unknown .abk-pill-dot {
    background: var(--abk-muted-foreground);
}

/* ------------------------------------------------------------------ agent card
 * Dashboard.tsx: list `space-y-3`; card `flex flex-wrap items-center gap-4 rounded-xl border
 * bg-card px-5 py-5 shadow-sm transition-shadow hover:shadow-md`. */
.abk.abk-agent-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.abk .abk-agent-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--abk-border);
    border-radius: var(--abk-radius-xl);
    background: var(--abk-card);
    box-shadow: var(--abk-shadow-sm);
    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-agent-card:hover {
    box-shadow: var(--abk-shadow-md);
}

/* `flex size-10 shrink-0 items-center justify-center rounded-full bg-brand`, image 24×24 */
.abk .abk-agent-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--abk-brand);
}

.abk .abk-agent-avatar img {
    display: block;
    width: 24px;
    height: 24px;
}

/* `min-w-0 flex-1 space-y-1.5` */
.abk .abk-agent-main {
    flex: 1 1 0%;
    min-width: 0;
}

.abk .abk-agent-main > * + * {
    margin-top: 0.375rem;
}

/* `flex flex-wrap items-center gap-x-2.5 gap-y-1` */
.abk .abk-agent-titlerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.625rem;
    row-gap: 0.25rem;
}

/* `text-base font-semibold leading-tight` */
.abk .abk-agent-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--abk-foreground);
}

/* `text-sm text-muted-foreground`, numbers `font-medium text-foreground` */
.abk .abk-agent-stats {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-muted-foreground);
}

.abk .abk-num {
    font-weight: 500;
    color: var(--abk-foreground);
}

/* `text-xs text-muted-foreground` */
.abk .abk-agent-created {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-muted-foreground);
}

/* `flex w-72 shrink-0 flex-col gap-2`; row `flex items-center gap-2` */
.abk .abk-agent-actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5rem;
    width: 18rem;
}

.abk .abk-agent-actions-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ------------------------------------------------------------------ dialog
 * dialog.tsx overlay `fixed inset-0 z-50 bg-black/80`; content `fixed left-1/2 top-1/2 w-full
 * max-w-lg -translate-1/2 border bg-background shadow-lg duration-200 sm:rounded-lg` with
 * DeployDialog's `flex max-h-[90vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-xl`.
 * z-index sits above the WordPress admin bar (99999). */
body.abk-modal-open {
    overflow: hidden;
}

.abk .abk-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgb(0 0 0 / 0.8);
    animation: abk-fade-in 200ms ease-out;
}

.abk .abk-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--abk-border);
    background: var(--abk-background);
    box-shadow: var(--abk-shadow-lg);
    transform: translate(-50%, -50%);
    animation: abk-zoom-in 200ms ease-out;
    outline: none;
}

@media (min-width: 640px) {
    .abk .abk-dialog {
        max-width: 36rem;
        border-radius: var(--abk-radius-lg);
    }
}

@keyframes abk-fade-in {
    from {
        opacity: 0;
    }
}

@keyframes abk-zoom-in {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.95);
    }
}

/* ✕ `absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100 focus:ring-2 ring-offset-2`, icon h-4 w-4 */
.abk .abk-dialog-x {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--abk-radius-sm);
    background: transparent;
    color: var(--abk-foreground);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-dialog-x:hover {
    opacity: 1;
}

.abk .abk-dialog-x:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--abk-background), 0 0 0 4px var(--abk-ring);
}

/* pinned top `shrink-0 space-y-4 px-6 pb-4 pt-6` */
.abk .abk-dialog-top {
    flex-shrink: 0;
    padding: 1.5rem 1.5rem 1rem;
}

.abk .abk-dialog-top > * + * {
    margin-top: 1rem;
}

/* DialogHeader `flex flex-col space-y-1.5 text-center sm:text-left` */
.abk .abk-dialog-header {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.abk .abk-dialog-header > * + * {
    margin-top: 0.375rem;
}

@media (min-width: 640px) {
    .abk .abk-dialog-header {
        text-align: left;
    }
}

/* DialogTitle `text-lg font-semibold leading-none tracking-tight` */
.abk .abk-dialog-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--abk-foreground);
}

/* DialogDescription `text-sm text-muted-foreground` */
.abk .abk-dialog-description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-muted-foreground);
    overflow-wrap: anywhere;
}

/* status strip `flex items-start gap-3 rounded-xl px-4 py-3 text-sm`
 * active `bg-brand-subtle text-brand-strong` · idle `bg-muted text-foreground` */
.abk .abk-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--abk-radius-xl);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.abk .abk-strip--active {
    background: var(--abk-brand-subtle);
    color: var(--abk-brand-strong);
}

.abk .abk-strip--idle {
    background: var(--abk-muted);
    color: var(--abk-foreground);
}

/* dot `mt-1.5 size-2 shrink-0 rounded-full`; active `bg-brand ring-4 ring-brand/15`;
 * idle `border-2 border-muted-foreground/50` */
.abk .abk-strip-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.375rem;
    border-radius: 9999px;
}

.abk .abk-strip--active .abk-strip-dot {
    background: var(--abk-brand);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--abk-brand) 15%, transparent);
}

.abk .abk-strip--idle .abk-strip-dot {
    border: 2px solid color-mix(in oklab, var(--abk-muted-foreground) 50%, transparent);
}

/* Loading (KTD17 delta): a spinner in the dot's place. */
.abk .abk-strip-marker {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--abk-muted-foreground);
}

/* `min-w-0 flex-1`; head `block font-semibold`; line `block`, brand-strong or muted */
.abk .abk-strip-text {
    flex: 1 1 0%;
    min-width: 0;
}

.abk .abk-strip-head {
    display: block;
    font-weight: 600;
}

.abk .abk-strip-line {
    display: block;
    color: var(--abk-muted-foreground);
}

.abk .abk-strip--active .abk-strip-line {
    color: var(--abk-brand-strong);
}

.abk .abk-strip-retry {
    align-self: center;
}

/* switch.tsx: `inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent
 * shadow-xs focus-visible:ring-2 disabled:opacity-50 checked:bg-brand unchecked:bg-input
 * unchecked:border-muted-foreground`; thumb `h-4 w-4 rounded-full bg-white shadow
 * checked:translate-x-4`. DeployDialog: `mt-0.5 shrink-0`. */
.abk .abk-switch-wrap {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.125rem;
}

.abk .abk-switch-spinner {
    display: inline-flex;
    color: var(--abk-muted-foreground);
}

.abk .abk-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    border: 2px solid var(--abk-muted-foreground);
    border-radius: 9999px;
    background: var(--abk-input);
    box-shadow: var(--abk-shadow-xs);
    cursor: pointer;
    outline: none;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-switch.is-on {
    border-color: transparent;
    background: var(--abk-brand);
}

.abk .abk-switch:focus-visible {
    box-shadow: 0 0 0 2px var(--abk-ring), var(--abk-shadow-xs);
}

.abk .abk-switch:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.abk .abk-switch-thumb {
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background: var(--abk-white);
    box-shadow: var(--abk-shadow-sm);
    pointer-events: none;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-switch.is-on .abk-switch-thumb {
    transform: translateX(1rem);
}

/* R15 failure message (KTD17 delta: the prototype's switch never fails). */
.abk .abk-switch-error {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-error);
}

/* body `wpj-thin-scroll min-h-0 min-w-0 flex-1 space-y-3 overflow-y-auto border-t px-6 py-4` */
.abk .abk-dialog-body {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--abk-border);
}

.abk .abk-dialog-body > * + * {
    margin-top: 0.75rem;
}

/* journey.css .wpj-thin-scroll */
.abk .abk-thin-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--abk-border) transparent;
}

.abk .abk-thin-scroll:hover {
    scrollbar-color: color-mix(in oklch, var(--abk-muted-foreground) 50%, transparent) transparent;
}

.abk .abk-thin-scroll::-webkit-scrollbar {
    width: 6px;
}

.abk .abk-thin-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.abk .abk-thin-scroll::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background-color: var(--abk-border);
}

/* "Put it on your site" `text-base font-semibold`; line `mt-0.5 text-sm text-muted-foreground` */
.abk .abk-h-base {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.abk .abk-h-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.abk .abk-lead {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-muted-foreground);
}

/* `divide-y rounded-xl border` */
.abk .abk-box {
    border: 1px solid var(--abk-border);
    border-radius: var(--abk-radius-xl);
}

.abk .abk-box > * + * {
    border-top: 1px solid var(--abk-border);
}

/* The shortcode: its own white box, set apart from the rules by space alone, so it does not
 * read as one of the Show on / Hide on rules (owner, 2026-10-29). Solid border and no fill
 * colour, which would read as disabled (grey) or compete with the one green focal point
 * (DESIGN.md, Balanced Accent). Owner, 2026-10-30. */
.abk .abk-box--shortcode {
    margin-top: 1.5rem;
}

/* Shortcode fold trigger: Button ghost `group h-auto w-full items-start justify-between gap-3
 * rounded-none p-4 text-left font-normal hover:bg-transparent`; title `block text-sm
 * font-semibold underline-offset-4 group-hover:underline`; line `mt-0.5 block whitespace-normal
 * text-sm text-muted-foreground`; chevron `mt-0.5 size-4 text-muted-foreground
 * group-data-[state=open]:rotate-180`. */
.abk .abk-fold-trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--abk-foreground);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    outline: none;
}

.abk .abk-fold-trigger:focus-visible {
    box-shadow: inset 0 0 0 2px var(--abk-ring);
}

.abk .abk-fold-text {
    min-width: 0;
}

.abk .abk-fold-title {
    display: block;
    font-weight: 600;
    text-underline-offset: 4px;
}

.abk .abk-fold-trigger:hover .abk-fold-title {
    text-decoration: underline;
}

.abk .abk-fold-line {
    display: block;
    margin-top: 0.125rem;
    color: var(--abk-muted-foreground);
    white-space: normal;
}

.abk .abk-fold-chevron {
    margin-top: 0.125rem;
    color: var(--abk-muted-foreground);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-fold-trigger.is-open .abk-fold-chevron {
    transform: rotate(180deg);
}

.abk .abk-fold-panel[hidden] {
    display: none;
}

/* `flex items-center gap-2 px-4 pb-4`; code `flex h-9 min-w-0 flex-1 items-center truncate
 * rounded-md bg-muted px-3 text-xs`; Copy `outline sm h-9` */
.abk .abk-code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.abk .abk-code {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    height: 2.25rem;
    margin: 0;
    padding: 0 0.75rem;
    overflow: hidden;
    border-radius: var(--abk-radius-md);
    background: var(--abk-muted);
    color: var(--abk-foreground);
    font-family: var(--abk-font-mono);
    font-size: 0.75rem;
    line-height: 2.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.abk .abk-copy {
    height: 2.25rem;
}

.abk .abk-copy-error {
    padding: 0 1rem 1rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-error);
}

/* "Where it shows" `space-y-4 p-4` */
.abk .abk-where {
    padding: 1rem;
}

.abk .abk-where > * + * {
    margin-top: 1rem;
}

/* `border-t` between Show on and Hide on */
.abk .abk-divider {
    border-top: 1px solid var(--abk-border);
}

/* RuleGroup `space-y-2`; head `flex items-baseline justify-between gap-3`; hint `text-xs
 * text-muted-foreground`; list `space-y-2`; row li `space-y-1` */
.abk .abk-group > * + * {
    margin-top: 0.5rem;
}

.abk .abk-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.abk .abk-hint {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-muted-foreground);
}

.abk .abk-rules > * + * {
    margin-top: 0.5rem;
}

.abk .abk-rule {
    position: relative;
}

.abk .abk-rule > * + * {
    margin-top: 0.25rem;
}

/* RuleRow `flex items-center gap-2` */
.abk .abk-rule-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* SelectTrigger `h-9 w-44 shrink-0` over select.tsx `flex h-9 w-full items-center
 * justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2
 * text-sm shadow-sm focus-visible:ring-2 focus-visible:ring-ring [&>span]:line-clamp-1`;
 * chevron `h-4 w-4 opacity-50`. A <button role="combobox">: a native <select>'s list is drawn by
 * the OS and can't look like the prototype. While the list is open, focus sits on the trigger
 * (aria-activedescendant) but, as in Radix where focus is in the list, it shows no ring. */
.abk .abk-select {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 11rem;
    max-width: none;
    height: 2.25rem;
    min-height: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--abk-input);
    border-radius: var(--abk-radius-md);
    background: transparent;
    box-shadow: var(--abk-shadow-sm);
    color: var(--abk-foreground);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
}

.abk .abk-select:hover {
    background: transparent;
    color: var(--abk-foreground);
}

.abk .abk-select:focus-visible {
    box-shadow: 0 0 0 2px var(--abk-ring), var(--abk-shadow-sm);
}

.abk .abk-select[aria-expanded="true"]:focus-visible {
    box-shadow: var(--abk-shadow-sm);
}

.abk .abk-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.abk .abk-select-chevron {
    opacity: 0.5;
}

/* SelectContent, position="popper": `relative z-50 max-h-(--radix-select-content-available-height)
 * min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover
 * text-popover-foreground shadow-md`, `data-[side=bottom]:translate-y-1` (the 4px gap, set in JS),
 * open `fade-in-0 zoom-in-95 slide-in-from-top-2` (from-bottom-2 when flipped above); Viewport
 * `p-1 min-w-(--radix-select-trigger-width)`. Hangs off the layer, position: fixed (JS places it),
 * above the dialog (100001). */
.abk .abk-select-content {
    position: fixed;
    z-index: 100002;
    min-width: 8rem;
    margin: 0;
    padding: 0.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--abk-border);
    border-radius: var(--abk-radius-md);
    background: var(--abk-popover);
    box-shadow: var(--abk-shadow-md);
    color: var(--abk-popover-foreground);
    font-family: var(--abk-font-sans);
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: none;
    transform-origin: 0% 0%;
    animation: abk-select-in-bottom 150ms ease;
}

.abk .abk-select-content[data-side="top"] {
    transform-origin: 0% 100%;
    animation-name: abk-select-in-top;
}

.abk .abk-select-content.is-settled {
    animation: none;
}

@keyframes abk-select-in-bottom {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-0.5rem);
    }
}

@keyframes abk-select-in-top {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(0.5rem);
    }
}

/* SelectLabel `px-2 py-1.5 text-sm font-semibold` */
.abk .abk-select-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

/* SelectItem `relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2
 * pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground`; indicator `absolute
 * right-2 flex h-3.5 w-3.5 items-center justify-center`, Check `h-4 w-4`. */
.abk .abk-select-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.375rem 2rem 0.375rem 0.5rem;
    border-radius: var(--abk-radius-sm);
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.abk .abk-select-item.is-highlighted {
    background: var(--abk-accent);
    color: var(--abk-accent-foreground);
}

.abk .abk-select-indicator {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
}

.abk .abk-select-text {
    min-width: 0;
}

/* whole-section line `min-w-0 flex-1 truncate px-1 text-sm text-muted-foreground` */
.abk .abk-covers {
    flex: 1 1 0%;
    min-width: 0;
    padding: 0 0.25rem;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-muted-foreground);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ✕ `ghost icon size-9 shrink-0 text-muted-foreground` */
.abk .abk-rule-remove {
    color: var(--abk-muted-foreground);
}

/* `pl-46 text-xs text-destructive` */
.abk .abk-rule-error {
    padding-left: 11.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-destructive);
}

/* "Add rule" `ghost sm -ml-2 text-muted-foreground` */
.abk .abk-add {
    margin-left: -0.5rem;
    color: var(--abk-muted-foreground);
}

/* ItemPicker trigger: Button outline default `h-9 min-w-0 flex-1 justify-between font-normal`,
 * invalid `border-destructive`; text `min-w-0 truncate`, empty `text-muted-foreground`;
 * meta `flex shrink-0 items-center gap-1.5`; count `rounded-full bg-muted px-1.5 text-xs
 * font-medium text-muted-foreground`; chevron `size-4 opacity-50`. */
.abk .abk-picker-trigger {
    display: inline-flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    height: 2.25rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--abk-border);
    border-radius: var(--abk-radius-md);
    background: var(--abk-background);
    box-shadow: var(--abk-shadow-xs);
    color: var(--abk-foreground);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.abk .abk-picker-trigger:hover {
    background: var(--abk-accent);
    color: var(--abk-accent-foreground);
}

.abk .abk-picker-trigger:focus-visible {
    box-shadow: 0 0 0 2px var(--abk-ring), var(--abk-shadow-xs);
}

.abk .abk-picker-trigger.is-invalid {
    border-color: var(--abk-destructive);
}

.abk .abk-trigger-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.abk .abk-trigger-text.is-placeholder {
    color: var(--abk-muted-foreground);
}

.abk .abk-trigger-meta {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.375rem;
}

.abk .abk-count {
    padding: 0 0.375rem;
    border-radius: 9999px;
    background: var(--abk-muted);
    color: var(--abk-muted-foreground);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}

.abk .abk-trigger-chevron {
    opacity: 0.5;
}

/* PopoverContent `w-(--radix-popover-trigger-width) min-w-72 p-0`, align start, sideOffset 4,
 * over popover.tsx `rounded-md border bg-popover text-popover-foreground shadow-md`. Hangs off
 * the layer, position: fixed, above the dialog; JS places it under (or above) its field and
 * sets width and max-height to the room on screen (owner, 2026-10-30). A flex column: search,
 * pager and footer keep their size and only the list gives way, so Done never leaves it. */
.abk .abk-picker {
    position: fixed;
    z-index: 100002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--abk-border);
    border-radius: var(--abk-radius-md);
    background: var(--abk-popover);
    box-shadow: var(--abk-shadow-md);
    color: var(--abk-popover-foreground);
}

/* search `relative border-b p-2`; icon `absolute left-4 top-1/2 size-4 -translate-y-1/2
 * text-muted-foreground`; Input `h-8 pl-8` over input.tsx `h-9 w-full rounded-md border
 * border-input bg-transparent px-3 py-1 text-base md:text-sm shadow-xs focus-visible:ring-2` */
.abk .abk-picker-search {
    position: relative;
    padding: 0.5rem;
    border-bottom: 1px solid var(--abk-border);
}

.abk .abk-picker-search-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: var(--abk-muted-foreground);
    transform: translateY(-50%);
}

.abk .abk-input {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 2rem;
    min-height: 0;
    margin: 0;
    padding: 0.25rem 0.75rem 0.25rem 2rem;
    border: 1px solid var(--abk-input);
    border-radius: var(--abk-radius-md);
    background: transparent;
    box-shadow: var(--abk-shadow-xs);
    color: var(--abk-foreground);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

@media (min-width: 768px) {
    .abk .abk-input {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

/* Input is a plain field in the prototype: no browser clear button (Esc closes the dropdown). */
.abk .abk-input::-webkit-search-cancel-button,
.abk .abk-input::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

.abk .abk-input::placeholder {
    color: var(--abk-muted-foreground);
}

.abk .abk-input:focus {
    border-color: var(--abk-input);
    box-shadow: 0 0 0 2px var(--abk-ring), var(--abk-shadow-xs);
}

/* list `max-h-64 overflow-y-auto p-1`; row Label `flex cursor-pointer items-center gap-2.5
 * rounded-sm px-2 py-1.5 text-sm font-normal hover:bg-muted`; title `truncate` */
.abk .abk-picker-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
}

.abk .abk-picker > :not(.abk-picker-list) {
    flex: none;
}

.abk .abk-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border-radius: var(--abk-radius-sm);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 400;
    cursor: pointer;
}

.abk .abk-option:hover {
    background: var(--abk-muted);
}

.abk .abk-option.is-disabled {
    cursor: not-allowed;
}

.abk .abk-option.is-disabled .abk-option-text {
    opacity: 0.5;
}

.abk .abk-option-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* checkbox.tsx `h-4 w-4 shrink-0 rounded-sm border border-primary shadow
 * focus-visible:ring-2 disabled:opacity-50 checked:bg-primary checked:text-primary-foreground`,
 * Check `h-4 w-4` */
.abk .abk-check {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.abk .abk-checkbox {
    width: 1rem;
    height: 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--abk-primary);
    border-radius: var(--abk-radius-sm);
    background: transparent;
    box-shadow: var(--abk-shadow-sm);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.abk .abk-checkbox:checked {
    background: var(--abk-primary);
}

.abk .abk-checkbox:checked::before,
.abk .abk-checkbox::before {
    content: none;
}

.abk .abk-checkbox:focus,
.abk .abk-checkbox:focus-visible {
    border-color: var(--abk-primary);
    box-shadow: 0 0 0 2px var(--abk-ring);
}

.abk .abk-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.abk .abk-check-icon {
    position: absolute;
    inset: 0;
    display: none;
    color: var(--abk-primary-foreground);
}

.abk .abk-checkbox:checked + .abk-check-icon {
    display: block;
}

/* empty / loading / error `px-2 py-3 text-sm text-muted-foreground` */
.abk .abk-picker-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-muted-foreground);
}

/* Paging (KTD17 delta: production searches on the server, 20 per page). */
.abk .abk-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    border-top: 1px solid var(--abk-border);
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-muted-foreground);
}

.abk .abk-pager-buttons {
    display: inline-flex;
    gap: 0.25rem;
}

/* The 200-item limit (KTD17 delta). */
.abk .abk-cap {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--abk-border);
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-warning);
}

/* footer `flex items-center justify-between gap-2 border-t px-3 py-2`; note `text-xs
 * text-muted-foreground`; Done `size sm` (default variant) */
.abk .abk-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--abk-border);
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--abk-muted-foreground);
}

/* DialogFooter `flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2` with
 * DeployDialog's `shrink-0 items-center border-t bg-background px-6 py-4`; note `mr-auto
 * text-sm`, "Unsaved changes" `font-medium text-warning`, otherwise `text-muted-foreground`. */
.abk .abk-dialog-footer {
    display: flex;
    flex-direction: column-reverse;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--abk-border);
    background: var(--abk-background);
}

@media (min-width: 640px) {
    .abk .abk-dialog-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

.abk .abk-note {
    margin-right: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--abk-muted-foreground);
}

.abk .abk-note:empty {
    min-height: 0;
}

.abk .abk-note--warning {
    font-weight: 500;
    color: var(--abk-warning);
}

/* A failed save (KTD17 delta: the prototype's save never fails). */
.abk .abk-note--error {
    color: var(--abk-error);
}

/* ------------------------------------------------------------------ toast
 * Save results, where the prototype uses a sonner toast. */
.abk.abk-toast-region {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 100002;
    width: 356px;
    max-width: calc(100vw - 2rem);
}

.abk .abk-toast {
    padding: 1rem;
    border: 1px solid var(--abk-border);
    border-radius: var(--abk-radius-lg);
    background: var(--abk-background);
    box-shadow: var(--abk-shadow-lg);
    color: var(--abk-foreground);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.abk .abk-toast[hidden] {
    display: none;
}

.abk-offscreen {
    position: fixed;
    top: 0;
    left: -9999px;
}

/* ------------------------------------------------------------------ narrow screens
 * KTD17 delta (accessibility and narrow screens): at WordPress's 782px admin breakpoint the dialog
 * fills the screen, and every control is at least 44px tall. */
@media (max-width: 782px) {
    .abk .abk-dialog {
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border: 0;
        border-radius: 0;
        transform: none;
        animation: none;
    }

    .abk .abk-btn,
    .abk .abk-btn--sm,
    .abk .abk-select,
    .abk .abk-input,
    .abk .abk-picker-trigger,
    .abk .abk-copy {
        min-height: 2.75rem;
    }

    .abk .abk-btn--icon,
    .abk .abk-dialog-x {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .abk .abk-dialog-x {
        top: 0.25rem;
        right: 0.25rem;
    }

    .abk .abk-switch::after {
        content: '';
        position: absolute;
        inset: -0.75rem;
    }

    .abk .abk-option {
        min-height: 2.75rem;
    }

    .abk .abk-select-item {
        min-height: 2.75rem;
    }

    .abk .abk-agent-actions {
        width: 100%;
    }

    .abk .abk-rule-error {
        padding-left: 0;
    }
}

/* Below 640px the footer stacks (DialogFooter's flex-col-reverse); buttons fill the width. */
@media (max-width: 639px) {
    .abk .abk-dialog-footer {
        align-items: stretch;
    }

    .abk .abk-note {
        margin-right: 0;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abk .abk-overlay,
    .abk .abk-dialog,
    .abk .abk-select-content {
        animation: none;
    }

    .abk .abk-btn,
    .abk .abk-switch,
    .abk .abk-switch-thumb,
    .abk .abk-fold-chevron,
    .abk .abk-agent-card {
        transition: none;
    }
}