/*
 * Automations builder — namespaced (.atm-*) stylesheet. Airtable-Style Automation
 * System §Phase 6, restyled 2026-07-12 (Slate/Zinc neutral + ONE accent).
 * Loaded via a <link> in index.html (same pattern as every other module:
 * rfis.css, submittals.css, financial.css, …).
 *
 * DESIGN CONTRACT
 *  • Palette: neutral slate/zinc + ONE primary accent (--btn-pri, the org accent blue).
 *    Status colours (green/amber/red) appear ONLY inside small semantic chips — never as
 *    decoration, never as a large fill.
 *  • Spacing: an 8px grid (--atm-sp-1 … --atm-sp-6). Radius: 12px cards/panels/modals
 *    (--atm-radius-card), 8px controls (--atm-radius-ctl), pill on badges.
 *  • TYPE: a FIVE-step scale (+ one display step for the canvas title). EVERY text element
 *    declares an explicit font-size + line-height — see the warning below.
 *
 * THEMING: colors read theme custom properties with a light-literal fallback —
 * `var(--token, #literal)` — the house dark-mode idiom (see theme-dark.css §maps and
 * rfis.css). NO large bright fills; accents stay small (badges, active rows). Tokens
 * used: --page-bg (surface), --surface-card (cards), --panel-bg (recessed), --header-bg,
 * --header-border, --cell-text (strong text), --tb-color (muted), --row-hover-bg,
 * --tb-btn-x (controls), --sel-bg/--sel-fg (active), --btn-pri (CTA),
 * --chip-neutral-x + --sem-x (badges), --popover-x (menus).
 *
 * ⚠️ NEVER rely on an INHERITED font-size, and NEVER let a star be followed directly by a
 * slash inside this comment — that sequence CLOSES the block early and the CSS parser then
 * swallows the NEXT rule whole. This file shipped exactly that bug: a token list written
 * with star-slash between two names killed the first rule (.atm-container), so the page base
 * font-size never applied and every unsized element fell back to the browser's 16px — the
 * sidebar automation NAME (which declared no size of its own) rendered 16px bold and got
 * truncated (found + fixed 2026-07-12). Two defences are now in place: (1) every text rule
 * declares its own font-size, (2) every font-size uses a var() with a literal fallback, so
 * even a swallowed token block cannot resize the page. Write token wildcards as "--sem-x".
 *
 * !important: applied to PANEL/MENU visibility + positioning rules (house rule —
 * specificity wars can otherwise hide dialogs), scoped under .atm-* so blast radius is nil.
 */

/* ── design tokens ────────────────────────────────────────────────────────────
 * Declared on EVERY root the page renders into: the page shell plus the three
 * body-mounted (detached) trees — floating menus, modals/gallery. Custom properties
 * inherit, so a body-mounted menu would otherwise see none of these.
 */
.atm-container,
.atm-menu,
.atm-modal-overlay {
    /* type scale (5 steps + 1 display step) */
    --atm-fs-micro: 11px;   /* kickers, meta, status chips */
    --atm-fs-sm: 12px;      /* secondary + muted copy */
    --atm-fs-md: 13px;      /* body — the page base */
    --atm-fs-lg: 14px;      /* card + panel titles */
    --atm-fs-xl: 16px;      /* section headings, empty-state titles */
    --atm-fs-display: 18px; /* the canvas automation title (one use) */
    /* line heights */
    --atm-lh-tight: 1.35;
    --atm-lh-base: 1.5;
    /* spacing — 8px grid */
    --atm-sp-1: 4px;
    --atm-sp-2: 8px;
    --atm-sp-3: 12px;
    --atm-sp-4: 16px;
    --atm-sp-5: 20px;
    --atm-sp-6: 24px;
    /* radii */
    --atm-radius-card: 12px;
    --atm-radius-ctl: 8px;
    --atm-radius-pill: 999px;
    /* elevation — soft, only where it earns its keep */
    --atm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --atm-shadow-card: 0 2px 10px rgba(15, 23, 42, .08);
    --atm-shadow-pop: 0 8px 24px rgba(15, 23, 42, .16);
    --atm-shadow-modal: 0 20px 60px rgba(15, 23, 42, .28);
    /* the skeleton shimmer sweep — neutral slate so it reads in BOTH themes */
    --atm-skel-sweep: rgba(148, 163, 184, .20);
}

/* ── layout shell ─────────────────────────────────────────────────────────── */
.atm-container {
    position: relative; /* offset parent for the history overlay + toast */
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--page-bg, #f8f9fa);
    color: var(--cell-text, #1f2937);
    font-size: var(--atm-fs-md, 13px);
    line-height: var(--atm-lh-base, 1.5);
}
.atm-sidebar {
    width: 320px;
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--header-border, #e5e7eb);
    background: var(--header-bg, #fff);
}
.atm-canvas {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: var(--atm-sp-6, 24px);
}
.atm-props {
    /* Panel host — visibility is CLASS-toggled (.atm-open) with !important on BOTH the
       hidden + shown rules (house rule: win specificity wars) rather than an inline
       toggle a stylesheet !important would override. */
    display: none !important;
    width: 380px;
    flex: 0 0 380px;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    border-left: 1px solid var(--header-border, #e5e7eb);
    background: var(--header-bg, #fff);
}
.atm-props.atm-open { display: flex !important; }

/* ── a11y: one focus treatment for every interactive element on the page ───── */
.atm-container :focus-visible,
.atm-menu :focus-visible,
.atm-modal-overlay :focus-visible {
    outline: 2px solid var(--btn-pri, #2563eb);
    outline-offset: 2px;
}
/* screen-reader-only text (namespaced — no global .sr-only exists in this repo) */
.atm-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── skeleton loaders (CSS-only shimmer; motion-safe) ──────────────────────── */
.atm-skel {
    position: relative;
    overflow: hidden;
    border-radius: var(--atm-radius-ctl, 8px);
    background: var(--panel-bg, #eef1f5);
}
.atm-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--atm-skel-sweep, rgba(148, 163, 184, .2)), transparent);
    animation: atm-shimmer 1.4s ease-in-out infinite;
}
@keyframes atm-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .atm-skel::after { animation: none; }
    .atm-card, .atm-btn, .atm-list-item { transition: none !important; }
}
.atm-skel-line { height: 10px; margin-bottom: var(--atm-sp-1, 4px); }
.atm-skel-row {
    display: flex; align-items: center; gap: var(--atm-sp-2, 8px);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    margin-bottom: var(--atm-sp-1, 4px);
}
.atm-skel-row-main { flex: 1 1 auto; min-width: 0; }
.atm-skel-row-main .atm-skel-line:first-child { width: 68%; }
.atm-skel-row-main .atm-skel-line:last-child { width: 90%; height: 8px; margin-bottom: 0; }
.atm-skel-pill { flex: 0 0 auto; width: 34px; height: 16px; border-radius: var(--atm-radius-pill, 999px); }
.atm-skel-card { height: 84px; margin-bottom: var(--atm-sp-3, 12px); border-radius: var(--atm-radius-card, 12px); }
.atm-skel-card-sm { height: 132px; border-radius: var(--atm-radius-card, 12px); }

/* ── sidebar ──────────────────────────────────────────────────────────────── */
.atm-sidebar-head {
    /* title on its OWN row; the action row sits BELOW it so the primary button can never
       be squeezed into a mid-word wrap (the 300px-sidebar bug). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--atm-sp-3, 12px);
    padding: var(--atm-sp-5, 20px) var(--atm-sp-4, 16px) var(--atm-sp-3, 12px);
}
.atm-sidebar-title {
    margin: 0;
    font-size: var(--atm-fs-xl, 16px);
    line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cell-text, #111827);
}
.atm-sidebar-actions { display: flex; align-items: center; gap: var(--atm-sp-2, 8px); }
.atm-create-btn { flex: 1 1 auto; white-space: nowrap; }
.atm-template-btn { flex: 0 0 auto; white-space: nowrap; }

.atm-search { padding: 0 var(--atm-sp-4, 16px) var(--atm-sp-3, 12px); }
.atm-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    font-size: var(--atm-fs-md, 13px);
    line-height: var(--atm-lh-base, 1.5);
    border: 1px solid var(--tb-btn-border, #d1d5db);
    border-radius: var(--atm-radius-ctl, 8px);
    background: var(--tb-btn-bg, #fff);
    color: var(--tb-btn-text, #374151);
}
.atm-search-input::placeholder { color: var(--tb-color, #9ca3af); }
.atm-search-input:hover { border-color: var(--tb-btn-hover-border, #9ca3af); }

.atm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--atm-sp-1, 4px) var(--atm-sp-2, 8px) var(--atm-sp-3, 12px); }

/* empty / error / no-match states (all three reuse .atm-list-empty as the shell) */
.atm-list-empty {
    padding: var(--atm-sp-6, 24px) var(--atm-sp-3, 12px);
    text-align: center;
    font-size: var(--atm-fs-md, 13px);
    line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
}
.atm-state-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    margin: 0 auto var(--atm-sp-3, 12px);
    font-size: var(--atm-fs-display, 18px);
    line-height: 1;
    border-radius: var(--atm-radius-pill, 999px);
    background: var(--panel-bg, #f1f5f9);
    color: var(--tb-color, #64748b);
}
.atm-state-title {
    font-size: var(--atm-fs-lg, 14px);
    line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700;
    color: var(--cell-text, #111827);
    margin-bottom: var(--atm-sp-1, 4px);
}
.atm-state-text {
    font-size: var(--atm-fs-sm, 12px);
    line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
    margin: 0 0 var(--atm-sp-4, 16px);
}
.atm-state-actions { display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px); align-items: stretch; }
.atm-state-error .atm-state-icon { background: var(--sem-danger-bg, #fee2e2); color: var(--sem-danger, #dc2626); }
.atm-state-error .atm-state-title { color: var(--sem-danger, #b91c1c); }

.atm-list-item {
    display: flex;
    align-items: center;
    gap: var(--atm-sp-2, 8px);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    border-radius: var(--atm-radius-ctl, 8px);
    border-left: 3px solid transparent; /* reserved so .active adds no layout shift */
    cursor: pointer;
    margin-bottom: var(--atm-sp-1, 4px);
    transition: background-color .12s ease, border-color .12s ease;
}
.atm-list-item:hover { background: var(--row-hover-bg, #f3f4f6); }
.atm-list-item.active {
    background: var(--sel-bg, #e8f0fe);
    border-left-color: var(--btn-pri, #2563eb);
}
.atm-list-item.active .atm-list-item-name { color: var(--sel-fg, #1d4ed8); }
.atm-list-item-main { flex: 1 1 auto; min-width: 0; }
.atm-list-item-name {
    /* the 2026-07-12 bug lived HERE: no font-size, no line-height, single-line ellipsis. */
    font-size: var(--atm-fs-md, 13px);
    line-height: var(--atm-lh-tight, 1.35);
    font-weight: 600;
    color: var(--cell-text, #111827);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.atm-list-item-desc {
    font-size: var(--atm-fs-sm, 12px);
    line-height: var(--atm-lh-tight, 1.35);
    color: var(--tb-color, #6b7280);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: var(--atm-sp-1, 4px);
}
.atm-kebab {
    flex: 0 0 auto;
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-xl, 16px); line-height: 1;
    padding: var(--atm-sp-1, 4px) var(--atm-sp-2, 8px);
    border-radius: var(--atm-radius-ctl, 8px);
    color: var(--tb-color, #6b7280);
}
.atm-kebab:hover { background: var(--tb-btn-hover-bg, #e5e7eb); color: var(--cell-text, #111827); }
.atm-kebab:active { background: var(--tb-btn-border, #d1d5db); }

/* ── badges ───────────────────────────────────────────────────────────────── */
.atm-badge {
    flex: 0 0 auto;
    border: 1px solid transparent;
    font-size: var(--atm-fs-micro, 11px); line-height: 1.4;
    font-weight: 700; letter-spacing: .02em;
    padding: 1px var(--atm-sp-2, 8px);
    border-radius: var(--atm-radius-pill, 999px);
    cursor: pointer; user-select: none;
    text-transform: uppercase;
}
.atm-badge-on { background: var(--sem-ok-bg, #dcfce7); color: var(--sem-ok, #15803d); }
.atm-badge-off { background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #6b7280); }
.atm-badge:hover { border-color: currentColor; }
.atm-badge:disabled { opacity: .55; cursor: not-allowed; }
.atm-miss-badge {
    display: inline-block; margin-top: var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-micro, 11px); line-height: 1.45; font-weight: 600;
    padding: 1px var(--atm-sp-2, 8px); border-radius: var(--atm-radius-pill, 999px);
    background: var(--sem-warn-bg, #fef3c7); color: var(--sem-warn, #b45309);
}
.atm-ok-badge {
    display: inline-block; margin-top: var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-micro, 11px); line-height: 1.45; font-weight: 600;
    padding: 1px var(--atm-sp-2, 8px); border-radius: var(--atm-radius-pill, 999px);
    background: var(--sem-ok-bg, #dcfce7); color: var(--sem-ok, #15803d);
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.atm-btn {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600;
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    border-radius: var(--atm-radius-ctl, 8px);
    cursor: pointer;
    border: 1px solid var(--tb-btn-border, #d1d5db);
    background: var(--tb-btn-bg, #fff);
    color: var(--tb-btn-text, #374151);
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.atm-btn:hover { background: var(--tb-btn-hover-bg, #f3f4f6); border-color: var(--tb-btn-hover-border, #9ca3af); }
.atm-btn:active { box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10); }
.atm-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.atm-btn:disabled:hover { background: var(--tb-btn-bg, #fff); border-color: var(--tb-btn-border, #d1d5db); }
.atm-btn-primary {
    border-color: var(--btn-pri, #2563eb);
    background: var(--btn-pri, #2563eb);
    color: var(--on-accent, #fff);
    box-shadow: var(--atm-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06));
}
.atm-btn-primary:hover { filter: brightness(.94); background: var(--btn-pri, #2563eb); border-color: var(--btn-pri, #2563eb); }
.atm-btn-primary:disabled:hover { background: var(--btn-pri, #2563eb); border-color: var(--btn-pri, #2563eb); }

/* ── canvas ───────────────────────────────────────────────────────────────── */
.atm-canvas-inner { max-width: 640px; margin: 0 auto; }
.atm-canvas-empty {
    text-align: center;
    padding: 64px var(--atm-sp-4, 16px);
    font-size: var(--atm-fs-md, 13px);
    line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
}
.atm-canvas-empty p { margin: 0; font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-base, 1.5); }
.atm-canvas-empty-title {
    font-size: var(--atm-fs-xl, 16px);
    line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700;
    color: var(--cell-text, #374151);
    margin-bottom: var(--atm-sp-2, 8px);
}
.atm-canvas-header {
    display: flex; align-items: center; gap: var(--atm-sp-3, 12px);
    margin-bottom: var(--atm-sp-6, 24px);
}
.atm-canvas-title {
    font-size: var(--atm-fs-display, 18px);
    line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cell-text, #111827);
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atm-flow { display: flex; flex-direction: column; align-items: stretch; }
.atm-flow-arrow {
    text-align: center;
    color: var(--tb-color, #9ca3af);
    font-size: var(--atm-fs-lg, 14px); line-height: 1;
    margin: var(--atm-sp-2, 8px) 0;
}
.atm-card {
    border: 1px solid var(--header-border, #e5e7eb);
    background: var(--surface-card, #fff);
    border-radius: var(--atm-radius-card, 12px);
    padding: var(--atm-sp-4, 16px);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.atm-card:hover { border-color: var(--tb-btn-hover-border, #93c5fd); box-shadow: var(--atm-shadow-card, 0 2px 10px rgba(15, 23, 42, .08)); }
/* the ONE accent on the canvas: the trigger card's leading rail */
.atm-trigger-card { border-left: 3px solid var(--btn-pri, #2563eb); }
.atm-step-draft { border-style: dashed; }
.atm-card-kicker {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #9ca3af);
}
.atm-card-title {
    font-size: var(--atm-fs-lg, 14px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #111827);
    margin-top: var(--atm-sp-1, 4px);
}
.atm-card-sub {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
    margin-top: var(--atm-sp-1, 4px);
}
/* the "+ Add action" drop-target: a dashed slot that reads as the next thing to do */
.atm-add-action {
    display: block; width: 100%;
    margin-top: var(--atm-sp-2, 8px);
    border: 1px dashed var(--tb-btn-border, #cbd5e1);
    background: var(--panel-bg, #f9fafb);
    color: var(--tb-btn-text, #475569);
    border-radius: var(--atm-radius-card, 12px);
    padding: var(--atm-sp-4, 16px);
    cursor: pointer;
    font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
.atm-add-action:hover {
    border-color: var(--btn-pri, #2563eb);
    color: var(--btn-pri, #2563eb);
    background: var(--row-hover-bg, #f3f4f6);
}

/* ── properties panel ─────────────────────────────────────────────────────── */
.atm-props-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--atm-sp-4, 16px);
    border-bottom: 1px solid var(--header-border, #e5e7eb);
}
.atm-props-title {
    font-size: var(--atm-fs-lg, 14px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #111827);
}
.atm-props-close {
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-display, 18px); line-height: 1;
    color: var(--tb-color, #6b7280);
    padding: var(--atm-sp-1, 4px) var(--atm-sp-2, 8px);
    border-radius: var(--atm-radius-ctl, 8px);
}
.atm-props-close:hover { color: var(--cell-text, #111827); background: var(--row-hover-bg, #f3f4f6); }
.atm-props-body { padding: var(--atm-sp-4, 16px); flex: 1 1 auto; }
.atm-props-note {
    margin-top: var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
}
.atm-props-note-warn { color: var(--sem-warn, #b45309); }
.atm-test-section {
    padding: var(--atm-sp-4, 16px);
    border-top: 1px solid var(--header-border, #e5e7eb);
    background: var(--panel-bg, #f9fafb);
}
.atm-test-head {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #9ca3af);
    margin-bottom: var(--atm-sp-2, 8px);
}

/* ── fields / forms ───────────────────────────────────────────────────────── */
.atm-field { margin-bottom: var(--atm-sp-4, 16px); }
.atm-label {
    display: block;
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 600; color: var(--cell-text, #374151);
    margin-bottom: var(--atm-sp-1, 4px);
}
.atm-req { color: var(--sem-danger, #dc2626); }
.atm-optional { color: var(--tb-color, #9ca3af); font-weight: 400; }
.atm-hint {
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
    margin: var(--atm-sp-1, 4px) 0 0;
}
.atm-hint-warn { color: var(--sem-warn, #b45309); }
.atm-empty-note {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
}
.atm-select, .atm-input {
    width: 100%; box-sizing: border-box;
    padding: var(--atm-sp-2, 8px) var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-tight, 1.35);
    border: 1px solid var(--tb-btn-border, #d1d5db);
    border-radius: var(--atm-radius-ctl, 8px);
    background: var(--tb-btn-bg, #fff); color: var(--tb-btn-text, #374151);
}
.atm-select:hover, .atm-input:hover { border-color: var(--tb-btn-hover-border, #9ca3af); }
.atm-select:disabled, .atm-input:disabled { opacity: .6; cursor: not-allowed; }
.atm-inline {
    display: flex; align-items: center; gap: var(--atm-sp-2, 8px);
    margin-top: var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    color: var(--tb-color, #6b7280);
}
.atm-inline .atm-input { width: 80px; }
.atm-inline.atm-disabled { opacity: .5; }
.atm-check {
    display: flex; align-items: center; gap: var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    color: var(--cell-text, #374151);
    cursor: pointer;
}

/* ── project scope (module-source triggers) ───────────────────────────────── */
.atm-project-scope { border-left: 2px solid var(--header-border, #e5e7eb); padding-left: var(--atm-sp-3, 12px); }
.atm-project-scope .atm-pscope-project { margin: var(--atm-sp-1, 4px) 0 var(--atm-sp-2, 8px) var(--atm-sp-6, 24px); }

/* ── scheduled preview ────────────────────────────────────────────────────── */
.atm-sched-preview {
    margin-top: var(--atm-sp-3, 12px);
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
    background: var(--panel-bg, #f9fafb);
    overflow: hidden;
}
.atm-sched-preview-head {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #6b7280);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    border-bottom: 1px solid var(--header-border, #e5e7eb);
}
.atm-sched-preview-body { padding: var(--atm-sp-1, 4px) 0; }
.atm-sched-preview-row {
    display: flex; align-items: center; gap: var(--atm-sp-2, 8px);
    padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--cell-text, #374151);
}
.atm-sched-dot { width: 6px; height: 6px; border-radius: var(--atm-radius-pill, 999px); background: var(--btn-pri, #2563eb); flex: 0 0 auto; }
.atm-sched-preview-empty {
    padding: var(--atm-sp-3, 12px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #9ca3af);
}

/* ── condition builder ────────────────────────────────────────────────────── */
.atm-cond-mount { margin-top: var(--atm-sp-2, 8px); }
.atm-cond-group {
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
    padding: var(--atm-sp-3, 12px);
    background: var(--panel-bg, #f9fafb);
}
.atm-cond-group .atm-cond-group { margin-top: var(--atm-sp-2, 8px); background: var(--surface-card, #fff); }
.atm-cond-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--atm-sp-2, 8px); }
.atm-conj-toggle { display: inline-flex; border: 1px solid var(--tb-btn-border, #d1d5db); border-radius: var(--atm-radius-ctl, 8px); overflow: hidden; }
.atm-conj {
    border: none; background: var(--tb-btn-bg, #fff); color: var(--tb-btn-text, #6b7280);
    font-size: var(--atm-fs-micro, 11px); line-height: 1.5; font-weight: 700;
    padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px); cursor: pointer;
}
.atm-conj:hover { background: var(--row-hover-bg, #f3f4f6); }
.atm-conj.active { background: var(--sel-bg, #e8f0fe); color: var(--sel-fg, #1d4ed8); }
.atm-cond-item { display: flex; align-items: flex-start; gap: var(--atm-sp-2, 8px); margin-bottom: var(--atm-sp-2, 8px); }
.atm-cond-lead {
    flex: 0 0 42px;
    font-size: var(--atm-fs-micro, 11px); line-height: 1.5;
    color: var(--tb-color, #9ca3af);
    padding-top: var(--atm-sp-2, 8px); text-align: right;
}
.atm-cond-conj { font-weight: 700; color: var(--sel-fg, #1d4ed8); }
.atm-cond-item-body { flex: 1 1 auto; min-width: 0; }
.atm-cond-leaf { display: flex; align-items: center; gap: var(--atm-sp-1, 4px); flex-wrap: wrap; }
.atm-cond-input, .atm-cond-select {
    padding: var(--atm-sp-1, 4px) var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    border: 1px solid var(--tb-btn-border, #d1d5db);
    border-radius: var(--atm-radius-ctl, 8px);
    background: var(--tb-btn-bg, #fff); color: var(--tb-btn-text, #374151);
}
.atm-cond-field { flex: 1 1 120px; min-width: 90px; }
.atm-cond-ftype { flex: 0 0 auto; }
.atm-cond-op { flex: 0 0 auto; }
.atm-cond-value { flex: 1 1 100px; min-width: 80px; }
.atm-cond-value-none { flex: 1 1 100px; }
.atm-cond-remove-leaf {
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-lg, 14px); line-height: 1;
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-1, 4px); border-radius: var(--atm-radius-ctl, 8px);
}
.atm-cond-remove-leaf:hover { color: var(--sem-danger, #dc2626); background: var(--row-hover-bg, #f3f4f6); }
.atm-cond-empty {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #9ca3af); padding: var(--atm-sp-1, 4px) 0;
}
.atm-cond-add { display: flex; gap: var(--atm-sp-2, 8px); margin-top: var(--atm-sp-2, 8px); }
.atm-cond-btn {
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600;
    color: var(--btn-pri, #2563eb);
    padding: var(--atm-sp-1, 4px); border-radius: var(--atm-radius-ctl, 8px);
}
.atm-cond-btn:hover { text-decoration: underline; }
.atm-cond-remove-group { color: var(--sem-danger, #dc2626); }

/* ── ⋯ menu + action menu (floating; !important positioning per house rule) ── */
.atm-menu {
    position: fixed !important;
    z-index: 100000 !important;
    min-width: 176px;
    background: var(--popover-bg, #fff);
    border: 1px solid var(--popover-border, #e5e7eb);
    border-radius: var(--atm-radius-card, 12px);
    box-shadow: var(--atm-shadow-pop, 0 8px 24px rgba(15, 23, 42, .16));
    padding: var(--atm-sp-1, 4px);
    color: var(--cell-text, #1f2937);
    font-size: var(--atm-fs-md, 13px);
}
.atm-menu-item {
    display: block; width: 100%; text-align: left;
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    border-radius: var(--atm-radius-ctl, 8px);
    color: var(--popover-text, #374151);
}
.atm-menu-item:hover { background: var(--row-hover-bg, #f3f4f6); }
.atm-menu-danger { color: var(--sem-danger, #dc2626); }

/* ── transfer-ownership modal (Phase 13; !important per house modal rule) ── */
.atm-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100002 !important;
    display: flex !important;
    align-items: center; justify-content: center;
    background: var(--modal-scrim, rgba(17, 24, 39, .45));
    padding: var(--atm-sp-5, 20px);
    font-size: var(--atm-fs-md, 13px);
}
.atm-modal {
    width: 100%; max-width: 460px;
    background: var(--popover-bg, #fff);
    border: 1px solid var(--popover-border, #e5e7eb);
    border-radius: var(--atm-radius-card, 12px);
    box-shadow: var(--atm-shadow-modal, 0 20px 60px rgba(15, 23, 42, .28));
    display: flex; flex-direction: column;
    overflow: hidden;
    color: var(--cell-text, #1f2937);
}
.atm-modal-head {
    display: flex; align-items: center; gap: var(--atm-sp-2, 8px);
    padding: var(--atm-sp-4, 16px);
    border-bottom: 1px solid var(--header-border, #e5e7eb);
}
.atm-modal-title {
    flex: 1 1 auto;
    font-size: var(--atm-fs-lg, 14px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #111827);
}
.atm-modal-x {
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-display, 18px); line-height: 1;
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-1, 4px); border-radius: var(--atm-radius-ctl, 8px);
}
.atm-modal-x:hover { color: var(--cell-text, #374151); background: var(--row-hover-bg, #f3f4f6); }
.atm-modal-body { padding: var(--atm-sp-4, 16px); display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px); }
.atm-modal-sub {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
    margin: 0 0 var(--atm-sp-1, 4px);
}
.atm-modal-body .atm-select { width: 100%; }
.atm-modal-error {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--sem-danger, #dc2626); background: var(--sem-danger-bg, #fee2e2);
    border-radius: var(--atm-radius-ctl, 8px);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    margin-top: var(--atm-sp-2, 8px);
}
.atm-modal-foot {
    display: flex; justify-content: flex-end; gap: var(--atm-sp-2, 8px);
    padding: var(--atm-sp-3, 12px) var(--atm-sp-4, 16px);
    border-top: 1px solid var(--header-border, #e5e7eb);
    background: var(--panel-bg, #f9fafb);
}

/* ── template gallery (Phase 14; reuses .atm-modal-overlay/.atm-modal; wider grid modal) ── */
.atm-gallery-modal { max-width: 880px !important; max-height: 84vh; }
.atm-gallery-body { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.atm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--atm-sp-3, 12px);
    overflow-y: auto;
    padding: var(--atm-sp-1, 4px) 2px 2px;
    min-height: 0;
}
.atm-gallery-loading {
    grid-column: 1 / -1;
    padding: var(--atm-sp-6, 24px);
    text-align: center;
    font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
}
.atm-gallery-card {
    display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px);
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-card, 12px);
    padding: var(--atm-sp-4, 16px);
    background: var(--surface-card, #fff);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.atm-gallery-card:hover { border-color: var(--tb-btn-hover-border, #93c5fd); box-shadow: var(--atm-shadow-card, 0 2px 10px rgba(15, 23, 42, .08)); }
.atm-gallery-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--atm-sp-2, 8px); }
.atm-gallery-badge {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.45;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--chip-neutral-fg, #475569);
    background: var(--chip-neutral-bg, #e5e7eb);
    border-radius: var(--atm-radius-pill, 999px);
    padding: 1px var(--atm-sp-2, 8px);
}
.atm-gallery-steps { font-size: var(--atm-fs-micro, 11px); line-height: 1.45; color: var(--tb-color, #9ca3af); }
.atm-gallery-card-name {
    font-size: var(--atm-fs-lg, 14px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #111827);
}
.atm-gallery-card-desc {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
    flex: 1 1 auto;
}
.atm-gallery-use { margin-top: var(--atm-sp-1, 4px); align-self: flex-start; }

/* ══ Phase 7 — action config, token picker, test UX ═══════════════════════════ */

/* ── token-capable fields ─────────────────────────────────────────────────── */
.atm-token-row { display: flex; align-items: flex-start; gap: var(--atm-sp-1, 4px); }
.atm-token-row .atm-token-input { flex: 1 1 auto; }
.atm-token-mount { flex: 0 0 auto; }
.atm-token-btn {
    white-space: nowrap;
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600;
    padding: var(--atm-sp-2, 8px); border-radius: var(--atm-radius-ctl, 8px); cursor: pointer;
    border: 1px dashed var(--tb-btn-border, #cbd5e1);
    background: var(--panel-bg, #f9fafb); color: var(--btn-pri, #2563eb);
}
.atm-token-btn:hover { border-color: var(--btn-pri, #2563eb); }

/* ── token picker menu ────────────────────────────────────────────────────── */
.atm-token-menu { max-height: 320px; overflow-y: auto; min-width: 240px; max-width: 340px; }
.atm-token-explainer {
    padding: var(--atm-sp-3, 12px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
}
.atm-token-explainer-title {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #374151);
    margin-bottom: var(--atm-sp-1, 4px);
}
.atm-token-group-head {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px) var(--atm-sp-1, 4px);
}
.atm-token-empty {
    padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px) var(--atm-sp-2, 8px);
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #9ca3af);
}
.atm-token-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.atm-token-name { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); color: var(--cell-text, #374151); }
.atm-token-path {
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35);
    color: var(--tb-color, #9ca3af);
    font-family: ui-monospace, Menlo, monospace;
}

/* ── action config forms ──────────────────────────────────────────────────── */
.atm-action-form { margin-top: var(--atm-sp-1, 4px); }
.atm-recip-chips { display: flex; flex-wrap: wrap; gap: var(--atm-sp-1, 4px); margin-bottom: var(--atm-sp-2, 8px); }
.atm-chip {
    display: inline-flex; align-items: center; gap: var(--atm-sp-1, 4px);
    font-size: var(--atm-fs-micro, 11px); line-height: 1.6;
    padding: 2px var(--atm-sp-1, 4px) 2px var(--atm-sp-2, 8px);
    border-radius: var(--atm-radius-pill, 999px);
    background: var(--sel-bg, #e8f0fe); color: var(--sel-fg, #1d4ed8);
}
.atm-chip-x {
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-lg, 14px); line-height: 1;
    color: inherit; padding: 0 2px;
}
.atm-fieldmap { display: flex; flex-direction: column; gap: var(--atm-sp-1, 4px); margin-bottom: var(--atm-sp-2, 8px); }
.atm-fieldmap-row { display: flex; align-items: center; gap: var(--atm-sp-1, 4px); }
.atm-fieldmap-row .atm-fm-field { flex: 0 0 34%; }
.atm-fieldmap-row .atm-fm-valuewrap { flex: 1 1 auto; }
.atm-fm-remove {
    border: none; background: none; cursor: pointer;
    font-size: var(--atm-fs-lg, 14px); line-height: 1;
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-1, 4px); border-radius: var(--atm-radius-ctl, 8px);
}
.atm-fm-remove:hover { color: var(--sem-danger, #dc2626); background: var(--row-hover-bg, #f3f4f6); }
.atm-action-form code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: var(--atm-fs-micro, 11px);
    background: var(--panel-bg, #f3f4f6);
    padding: 1px var(--atm-sp-1, 4px); border-radius: 4px;
}

/* ── send_email "more options" expander + attachments editor ──────────────── */
.atm-more {
    margin: var(--atm-sp-2, 8px) 0 var(--atm-sp-4, 16px);
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
}
.atm-more-summary {
    cursor: pointer;
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600;
    color: var(--btn-pri, #2563eb);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    list-style: none; user-select: none;
    border-radius: var(--atm-radius-ctl, 8px);
}
.atm-more-summary::-webkit-details-marker { display: none; }
.atm-more-summary::before { content: '▸'; display: inline-block; margin-right: var(--atm-sp-1, 4px); transition: transform .12s ease; }
.atm-more[open] > .atm-more-summary::before { transform: rotate(90deg); }
.atm-more-body { padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px) var(--atm-sp-3, 12px); border-top: 1px solid var(--header-border, #e5e7eb); }
.atm-aid-presets { display: flex; flex-wrap: wrap; gap: var(--atm-sp-2, 8px); margin-bottom: var(--atm-sp-2, 8px); }
.atm-ae-attachments { display: flex; flex-direction: column; gap: var(--atm-sp-1, 4px); margin-bottom: var(--atm-sp-2, 8px); }
.atm-ae-att-row { display: flex; align-items: center; gap: var(--atm-sp-1, 4px); }
.atm-ae-att-row .atm-ae-att-kind { flex: 0 0 42%; }
.atm-ae-att-row .atm-ae-att-step, .atm-ae-att-row .atm-ae-att-doc { flex: 1 1 auto; min-width: 0; }
.atm-ae-inserttable-field .atm-ae-table-step { width: 100%; }

/* ── run_if gate ──────────────────────────────────────────────────────────── */
.atm-runif { margin-bottom: var(--atm-sp-4, 16px); padding-top: var(--atm-sp-3, 12px); border-top: 1px dashed var(--header-border, #e5e7eb); }
.atm-runif-mount { margin-top: var(--atm-sp-2, 8px); }

/* ── test section ─────────────────────────────────────────────────────────── */
.atm-test-gate {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    border-radius: var(--atm-radius-ctl, 8px);
    margin-bottom: var(--atm-sp-3, 12px);
}
.atm-test-gate-ok { background: var(--sem-ok-bg, #dcfce7); color: var(--sem-ok, #15803d); }
.atm-test-gate-warn { background: var(--sem-warn-bg, #fef3c7); color: var(--sem-warn, #b45309); }
.atm-test-actions { display: flex; flex-wrap: wrap; gap: var(--atm-sp-2, 8px); margin-bottom: var(--atm-sp-3, 12px); }
.atm-test-result { margin-bottom: var(--atm-sp-3, 12px); }
.atm-test-loading { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--tb-color, #6b7280); }
.atm-test-ok { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--sem-ok, #15803d); font-weight: 600; }
.atm-test-warn { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--sem-warn, #b45309); }
.atm-test-fail { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--sem-danger, #dc2626); }
.atm-enable-row { padding-top: var(--atm-sp-2, 8px); border-top: 1px solid var(--header-border, #e5e7eb); }
.atm-enable-explainer { margin-top: var(--atm-sp-2, 8px); }
.atm-gate-explainer { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--tb-color, #6b7280); }

/* ── sample + step results ────────────────────────────────────────────────── */
.atm-sample {
    margin-top: var(--atm-sp-2, 8px);
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
    overflow: hidden;
}
.atm-sample-head {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    background: var(--panel-bg, #f9fafb);
}
.atm-sample-row {
    display: flex; gap: var(--atm-sp-2, 8px);
    padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    border-top: 1px solid var(--header-border, #f1f5f9);
}
.atm-sample-k { flex: 0 0 38%; color: var(--tb-color, #6b7280); font-weight: 600; }
.atm-sample-v { flex: 1 1 auto; color: var(--cell-text, #374151); word-break: break-word; }
.atm-run-head {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #111827);
    margin-bottom: var(--atm-sp-2, 8px);
    display: flex; align-items: center; gap: var(--atm-sp-2, 8px);
}
.atm-run-steps { display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px); }
.atm-run-step {
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    background: var(--surface-card, #fff);
}
.atm-run-step-head { display: flex; align-items: center; gap: var(--atm-sp-2, 8px); margin-bottom: var(--atm-sp-1, 4px); }
.atm-run-step-label { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600; color: var(--cell-text, #374151); }
.atm-step-result { display: flex; flex-direction: column; gap: var(--atm-sp-1, 4px); }
.atm-test-json {
    margin: 0;
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35);
    font-family: ui-monospace, Menlo, monospace;
    background: var(--panel-bg, #f9fafb); color: var(--cell-text, #374151);
    padding: var(--atm-sp-2, 8px); border-radius: var(--atm-radius-ctl, 8px);
    overflow-x: auto; max-height: 160px; white-space: pre-wrap; word-break: break-word;
}

/* ── status badges (the ONLY place status colour is allowed — small chips) ── */
.atm-dry-badge, .atm-ran-badge, .atm-fail-badge, .atm-skip-badge, .atm-run-status {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.4;
    font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 1px var(--atm-sp-2, 8px); border-radius: var(--atm-radius-pill, 999px);
    white-space: nowrap;
}
.atm-dry-badge { background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #6b7280); }
.atm-ran-badge, .atm-run-success { background: var(--sem-ok-bg, #dcfce7); color: var(--sem-ok, #15803d); }
.atm-fail-badge, .atm-run-failed { background: var(--sem-danger-bg, #fee2e2); color: var(--sem-danger, #dc2626); }
.atm-skip-badge { background: var(--sem-warn-bg, #fef3c7); color: var(--sem-warn, #b45309); }
.atm-run-running, .atm-run-queued { background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #6b7280); }
.atm-run-cancelled, .atm-run-skipped_loop_guard { background: var(--sem-warn-bg, #fef3c7); color: var(--sem-warn, #b45309); }

/* ── toast (FALLBACK only — the page delegates to the global window.showToast) ── */
.atm-toast {
    position: absolute !important;
    left: 50%; bottom: var(--atm-sp-6, 24px); transform: translateX(-50%);
    z-index: 100001 !important;
    background: var(--cell-text, #111827); color: var(--page-bg, #fff);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-4, 16px);
    border-radius: var(--atm-radius-ctl, 8px);
    box-shadow: var(--atm-shadow-pop, 0 8px 24px rgba(15, 23, 42, .16));
    max-width: 480px;
}

/* ══ Phase 8 — run history overlay, failure surfacing, quota banner ═══════════ */

/* ── canvas header: History button ────────────────────────────────────────── */
.atm-canvas-header-spacer { flex: 1 1 auto; }
.atm-history-btn { flex: 0 0 auto; }

/* ── auto-disable warning banner (canvas) ─────────────────────────────────── */
.atm-disabled-banner {
    display: flex; align-items: flex-start; gap: var(--atm-sp-3, 12px);
    margin-bottom: var(--atm-sp-5, 20px);
    padding: var(--atm-sp-3, 12px) var(--atm-sp-4, 16px);
    border: 1px solid var(--sem-warn, #b45309);
    border-radius: var(--atm-radius-card, 12px);
    background: var(--sem-warn-bg, #fef3c7);
    color: var(--sem-warn, #92400e);
}
.atm-disabled-icon { flex: 0 0 auto; font-size: var(--atm-fs-lg, 14px); line-height: var(--atm-lh-base, 1.5); }
.atm-disabled-text {
    display: flex; flex-direction: column; gap: var(--atm-sp-1, 4px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
}
.atm-disabled-text strong { font-weight: 700; }

/* ── history overlay (covers canvas + props; the 320px sidebar stays live) ──── */
.atm-history {
    display: none !important;
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 320px;
    z-index: 60 !important;
    flex-direction: column;
    min-height: 0; overflow: hidden;
    background: var(--page-bg, #f8f9fa);
    border-left: 1px solid var(--header-border, #e5e7eb);
    font-size: var(--atm-fs-md, 13px);
}
.atm-history.atm-open { display: flex !important; }
.atm-hist-head {
    position: relative;
    display: flex; align-items: center; gap: var(--atm-sp-3, 12px);
    padding: var(--atm-sp-4, 16px) var(--atm-sp-5, 20px);
    border-bottom: 1px solid var(--header-border, #e5e7eb);
    background: var(--header-bg, #fff);
}
.atm-hist-back { flex: 0 0 auto; }
.atm-hist-title {
    font-size: var(--atm-fs-xl, 16px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #111827);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atm-hist-flash {
    position: absolute; right: var(--atm-sp-5, 20px); top: 50%; transform: translateY(-50%);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px);
    border-radius: var(--atm-radius-ctl, 8px);
    background: var(--sel-bg, #e8f0fe); color: var(--sel-fg, #1d4ed8);
}
.atm-hist-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--atm-sp-4, 16px) var(--atm-sp-5, 20px) 32px; }
.atm-hist-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px); }
.atm-hist-loading, .atm-hist-empty {
    text-align: center;
    font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #6b7280);
    padding: 40px var(--atm-sp-3, 12px);
}
.atm-hist-skel { display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px); }
.atm-hist-skel .atm-skel-card { height: 46px; margin-bottom: 0; }

/* ── quota banner (≥90%; distinct 100%) ───────────────────────────────────── */
.atm-quota-banner {
    display: flex; align-items: center; gap: var(--atm-sp-3, 12px);
    max-width: 760px; margin: var(--atm-sp-3, 12px) auto 0;
    padding: var(--atm-sp-2, 8px) var(--atm-sp-4, 16px);
    border-radius: var(--atm-radius-ctl, 8px);
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5);
}
.atm-quota-90 { background: var(--sem-warn-bg, #fef3c7); color: var(--sem-warn, #92400e); border: 1px solid var(--sem-warn, #b45309); }
.atm-quota-100 { background: var(--sem-danger-bg, #fee2e2); color: var(--sem-danger, #b91c1c); border: 1px solid var(--sem-danger, #dc2626); }
.atm-quota-pct { flex: 0 0 auto; font-weight: 800; font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-tight, 1.35); }
.atm-quota-msg { flex: 1 1 auto; }

/* ── run rows ─────────────────────────────────────────────────────────────── */
.atm-hist-run {
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-card, 12px);
    background: var(--surface-card, #fff);
    overflow: hidden;
}
.atm-hist-run.expanded { border-color: var(--tb-btn-hover-border, #93c5fd); }
.atm-hist-run-head {
    display: flex; align-items: center; gap: var(--atm-sp-3, 12px); flex-wrap: wrap;
    padding: var(--atm-sp-3, 12px);
    cursor: pointer;
}
.atm-hist-run-head:hover { background: var(--row-hover-bg, #f3f4f6); }
.atm-hist-run-id { font-size: var(--atm-fs-md, 13px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600; color: var(--cell-text, #111827); }
.atm-hist-run-when { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); color: var(--tb-color, #6b7280); }
.atm-hist-run-dur { font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35); color: var(--tb-color, #9ca3af); }
.atm-hist-caret { margin-left: auto; font-size: var(--atm-fs-sm, 12px); line-height: 1; color: var(--tb-color, #9ca3af); }
.atm-hist-test {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.4;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 1px var(--atm-sp-2, 8px); border-radius: var(--atm-radius-pill, 999px);
    background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #6b7280);
}
.atm-hist-chain { font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35); color: var(--tb-color, #6b7280); }
.atm-hist-project {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.4;
    padding: 1px var(--atm-sp-2, 8px); border-radius: var(--atm-radius-pill, 999px);
    background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #475569);
}

/* ── run detail ───────────────────────────────────────────────────────────── */
.atm-hist-detail { padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px) var(--atm-sp-3, 12px); border-top: 1px solid var(--header-border, #f1f5f9); }
.atm-hist-run-error { margin: var(--atm-sp-2, 8px) 0; }
.atm-hist-steps { display: flex; flex-direction: column; gap: var(--atm-sp-2, 8px); margin-top: var(--atm-sp-2, 8px); }
.atm-hist-nosteps { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--tb-color, #9ca3af); padding: var(--atm-sp-1, 4px) 0; }
.atm-hist-step {
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    background: var(--panel-bg, #f9fafb);
}
.atm-hist-step-head { display: flex; align-items: center; gap: var(--atm-sp-2, 8px); margin-bottom: var(--atm-sp-1, 4px); }
.atm-hist-step-label { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600; color: var(--cell-text, #374151); }
.atm-hist-step-dur { margin-left: auto; font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35); color: var(--tb-color, #9ca3af); }
.atm-hist-io { margin-top: var(--atm-sp-1, 4px); }
/* Phase 10 — nested for_each / if_else steps: indent rail + iteration/branch tags (NEUTRAL rails:
   the one accent is reserved for the trigger card + primary CTA). */
.atm-hist-step-nested { border-left: 3px solid var(--header-border, #cbd5e1); }
.atm-hist-frame {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.4;
    font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 1px var(--atm-sp-2, 8px); border-radius: var(--atm-radius-pill, 999px);
    white-space: nowrap;
    background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #475569);
}
.atm-hist-iter { background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #475569); }
.atm-hist-branch { background: var(--chip-neutral-bg, #e5e7eb); color: var(--chip-neutral-fg, #475569); }
.atm-hist-loopsum, .atm-hist-branchsum {
    background: transparent; color: var(--tb-color, #6b7280);
    text-transform: none; font-weight: 600; letter-spacing: 0;
}
.atm-hist-k {
    display: block;
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #9ca3af);
    margin-bottom: var(--atm-sp-1, 4px);
}
.atm-hist-actions { margin-top: var(--atm-sp-3, 12px); }
.atm-hist-more { display: block; margin: var(--atm-sp-4, 16px) auto 0; }

/* ══ Phase 11 — canvas group cards (for_each / if_else), nested rails, add-step menu ═══════════ */

/* ── group card shell (framed container; head is the selectable card, body holds the child rail) ── */
.atm-group-card { padding: 0; overflow: hidden; }
/* group rails stay NEUTRAL — the kicker text says which is which; colour is not decoration */
.atm-loop-card { border-left: 3px solid var(--chip-neutral-fg, #94a3b8); }
.atm-branch-card { border-left: 3px solid var(--chip-neutral-fg, #94a3b8); }
.atm-group-head { padding: var(--atm-sp-4, 16px); }
.atm-group-head code {
    font-family: ui-monospace, Menlo, monospace;
    font-size: var(--atm-fs-micro, 11px);
    background: var(--panel-bg, #f3f4f6);
    padding: 1px var(--atm-sp-1, 4px); border-radius: 4px;
}
.atm-group-body {
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px) var(--atm-sp-3, 12px) var(--atm-sp-4, 16px);
    border-top: 1px solid var(--header-border, #eef0f3);
    background: var(--panel-bg, #f9fafb);
}
/* indent rail: nested children sit inside a bordered rail so nesting reads at a glance */
.atm-group-children {
    display: flex; flex-direction: column; align-items: stretch;
    margin: var(--atm-sp-1, 4px) 0 var(--atm-sp-2, 8px) var(--atm-sp-1, 4px);
    padding-left: var(--atm-sp-3, 12px);
    border-left: 2px solid var(--header-border, #cbd5e1);
}
.atm-group-children .atm-flow-arrow { margin: 2px 0; font-size: var(--atm-fs-sm, 12px); }
.atm-group-children .atm-card { padding: var(--atm-sp-3, 12px); }
.atm-group-empty { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); color: var(--tb-color, #9ca3af); padding: var(--atm-sp-2, 8px) 2px; }
.atm-group-note { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-base, 1.5); }

/* per-branch section (if_else): "Branch N (condition)" / "Else" + its own child rail */
.atm-branch-section { margin-top: var(--atm-sp-2, 8px); }
.atm-branch-section + .atm-branch-section { border-top: 1px dashed var(--header-border, #e5e7eb); padding-top: var(--atm-sp-2, 8px); }
.atm-branch-label {
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 700; color: var(--cell-text, #374151);
    padding: 2px 0;
}
.atm-branch-cond { font-weight: 500; color: var(--tb-color, #6b7280); }
.atm-else-section .atm-branch-label { color: var(--cell-text, #374151); }

/* "＋ Add step" inside a group/branch slot */
.atm-add-child {
    display: inline-block; margin-top: 2px;
    border: 1px dashed var(--tb-btn-border, #cbd5e1);
    background: var(--surface-card, #fff);
    color: var(--tb-btn-text, #475569);
    border-radius: var(--atm-radius-ctl, 8px);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px);
    cursor: pointer;
    font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 600;
}
.atm-add-child:hover { border-color: var(--btn-pri, #2563eb); color: var(--btn-pri, #2563eb); }

/* add-step menu — "Advanced logic" divider + at-cap hint */
.atm-menu-divider {
    font-size: var(--atm-fs-micro, 11px); line-height: 1.3;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-2, 8px) var(--atm-sp-3, 12px) var(--atm-sp-1, 4px);
    margin-top: var(--atm-sp-1, 4px);
    border-top: 1px solid var(--header-border, #eef0f3);
}
.atm-menu-hint {
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-base, 1.5);
    color: var(--tb-color, #9ca3af);
    padding: var(--atm-sp-1, 4px) var(--atm-sp-3, 12px) var(--atm-sp-2, 8px);
}
.atm-menu-advanced { font-weight: 600; }

/* ── if_else properties editor (branches: condition builder per branch + reorder + else) ──── */
.atm-branches { display: flex; flex-direction: column; gap: var(--atm-sp-3, 12px); }
.atm-branch-editor {
    border: 1px solid var(--header-border, #e5e7eb);
    border-radius: var(--atm-radius-ctl, 8px);
    padding: var(--atm-sp-3, 12px);
    background: var(--panel-bg, #f9fafb);
}
.atm-branch-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--atm-sp-2, 8px); }
.atm-branch-editor-title { font-size: var(--atm-fs-sm, 12px); line-height: var(--atm-lh-tight, 1.35); font-weight: 700; color: var(--cell-text, #111827); }
.atm-branch-editor-ctrls { display: flex; align-items: center; gap: var(--atm-sp-1, 4px); }
.atm-branch-editor-ctrls .atm-cond-btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: none; }
.atm-branch-cond-label {
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35);
    font-weight: 600; color: var(--tb-color, #6b7280);
    margin-bottom: var(--atm-sp-1, 4px);
}
.atm-branch-add { margin-top: var(--atm-sp-2, 8px); }
.atm-else-toggle-field { margin-top: var(--atm-sp-4, 16px); }

/* ── condition builder — depth-cap hint (disabled "Add group" + note at MAX_CONDITION_DEPTH) ── */
.atm-cond-btn-disabled { color: var(--tb-color, #9ca3af) !important; cursor: not-allowed; }
.atm-cond-btn-disabled:hover { text-decoration: none; }
.atm-cond-depthhint {
    font-size: var(--atm-fs-micro, 11px); line-height: var(--atm-lh-tight, 1.35);
    color: var(--tb-color, #9ca3af); font-style: italic; align-self: center;
}