/* ============================================================================
   Automations page — MAX Workspace
   Off-white ground, white cards, 1px borders, no shadows. ServiceTitan blue
   reserved for primary actions + active toggles. iOS-style toggles.
   ========================================================================== */

.au-page {
  grid-area: content;
  height: 100%;
  overflow: auto;
  background: #F7F7F7;
  padding: 16px;
  box-sizing: border-box;
  scrollbar-width: thin;
}
.au-wrap { max-width: none; margin: 0; min-height: 100%; box-sizing: border-box; background: #fff; border: 1px solid #E6E6E6; border-radius: 16px; padding: 36px 40px 64px; }

.au {
  --au-border: #E6E6E6;
  --au-ink: #1C1C1C;
  --au-muted: #6B6F73;
  --au-faint: #9A9EA2;
  --au-bar-track: #ECEDEE;
  --au-bar-fill: #2A2A2A;
  --au-amber: #C98235;
  --au-amber-strong: #B5731F;
  --au-green: #1B8A5A;
  --au-red: #C0392B;
  --au-blue: #3f7ddb;
  --au-blue-hover: #356fc6;
}

/* ── primitives ─────────────────────────────────────────────────────────── */
.au-card { background: #fff; border: 1px solid #E6E6E6; box-shadow: none; border-radius: 16px; }
.au-eyebrow { font: 700 11px/1 "Inter", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--au-faint); }
.au-cardtitle { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--au-ink); }
.au-muted { color: var(--au-muted); }

.au-link { font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.au-link:hover { text-decoration: underline; }
.au-link--quiet { color: var(--au-muted); }
.au-link--quiet:hover { color: var(--au-ink); }

/* buttons reuse the app's .btn system (owner-view.css): primary / outline / ghost */
.au-btn--sm { height: 34px; padding: 0 16px; font-size: 13px; flex-direction: row; gap: 6px; }
.au-btn--sm svg, .au-btn--sm .a2-icon { width: 15px; height: 15px; }

/* chips (match the app's status badges) */
.au-chip { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 "Inter", system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.au-chip--active { background: var(--a2-background-color-success-subdued); color: var(--a2-color-green-700); }
.au-chip--active .au-dot { width: 6px; height: 6px; }
.au-chip--top { background: #FBEFD8; color: #9A6B0E; }
.au-chip--pop { background: #E7E9FB; color: #4338A8; }
.au-chip--new { background: #E2F4EC; color: #1B7A4D; }

/* iOS-style toggle */
.au-toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--a2-color-neutral-200); position: relative; border: 0; cursor: pointer; flex: 0 0 auto; transition: background 160ms ease; padding: 0; }
.au-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform 160ms ease; }
.au-toggle.is-on { background: var(--au-blue); }
.au-toggle.is-on::after { transform: translateX(16px); }

/* status dot */
.au-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.au-dot--green { background: var(--au-green); }
.au-dot--amber { background: var(--au-amber); }
.au-dot--red { background: var(--au-red); }

/* progress bar — matches the Revenue Pipeline pill style (white pill, inset blue fill) */
.au-bar { position: relative; width: 100%; height: 16px; background: #fff; border: 1px solid var(--a2-color-neutral-200); border-radius: 999px; }
.au-bar__fill { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--a2-color-blue-600); }

/* ── page header ────────────────────────────────────────────────────────── */
.au-head { margin-bottom: 16px; position: relative; }
.au-create { position: absolute; top: 0; right: 0; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 40px; padding: 0 16px; }
.au-create svg { width: 16px; height: 16px; flex: 0 0 auto; }
.au-head__title { margin: 0; font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--au-ink); }
.au-head__sub { margin: 8px 0 0; font: 400 14px/1.5 "Inter", system-ui, sans-serif; color: var(--au-muted); max-width: 62ch; }

/* ── section scaffolding ────────────────────────────────────────────────── */
.au-sec { margin-top: 0; }
.au-sec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.au-sec__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.au-sec__titlerow { display: flex; align-items: center; gap: 8px; }
.au-sec__title { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--au-ink); }
.au-sec__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-600); font: 600 12px/1 "Inter", system-ui, sans-serif; }
.au-sec__sub { font: 400 14px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); }

/* ── Section 1 — two columns ────────────────────────────────────────────── */
.au-s1 { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 20px; }

/* left — fully automated jobs */
.au-fa { padding: 24px; display: flex; flex-direction: column; }
.au-fa__title { margin-bottom: 20px; }
.au-fa__metric { display: flex; align-items: baseline; gap: 10px; }
.au-fa__big { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 44px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--au-ink); }
.au-fa__delta { display: inline-flex; align-items: center; gap: 3px; font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--au-green); }
.au-fa__delta svg { width: 13px; height: 13px; }
.au-fa__cap { margin: 8px 0 18px; font: 400 13.5px/1.5 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fa__barmeta { display: flex; justify-content: space-between; margin-top: 10px; font: 400 12.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fa__barmeta .au-fa__gap { color: var(--au-red); }
.au-fa__stats { margin-top: 22px; border-top: 1px solid var(--au-border); }
.au-fa__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--au-border); }
.au-fa__row:last-child { border-bottom: 0; }
.au-fa__k { font: 400 13.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fa__v { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 14px; font-weight: 500; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-fa__row--muted .au-fa__k, .au-fa__row--muted .au-fa__v { color: var(--au-faint); }

/* right — funnel */
.au-fn { padding: 24px; }
.au-fn__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.au-fn__titlewrap { display: flex; flex-direction: column; gap: 7px; }
.au-fn__note { font: 400 12.5px/1.4 "Inter", system-ui, sans-serif; color: var(--au-faint); text-align: right; max-width: 22ch; }
.au-fn__list { display: flex; flex-direction: column; }
.au-fn-row { display: grid; grid-template-columns: 200px 1fr 88px; align-items: center; gap: 18px; padding: 7px 0; }
.au-fn-row__track { width: 100%; min-width: 0; }
.au-fn-drop { padding-left: 218px; margin: 1px 0; font: 400 11px/1.3 "Inter", system-ui, sans-serif; color: var(--au-faint); }
.au-fn-row__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--au-ink); }
.au-fn-row__agent { margin-top: 3px; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fn-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.au-fn-row__pct { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 16px; font-weight: 500; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-fn-row__tag { font: 400 11.5px/1 "Inter", system-ui, sans-serif; }
.au-fn-row__tag--good { color: var(--au-green); }
.au-fn-row__tag--bottleneck { color: var(--au-amber-strong); }
/* bottleneck row — amber across label, bar, percentage */
.au-fn-row.is-bottleneck .au-fn-row__name { color: var(--au-amber-strong); }
.au-fn-row.is-bottleneck .au-fn-row__pct { color: var(--au-amber-strong); }
.au-fn-row.is-bottleneck .au-fn-bar__ai { background: var(--au-amber); }
.au-fn__insight { margin: 20px 0 0; font: 400 13.5px/1.55 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fn__insight b { font-weight: 600; color: var(--au-amber-strong); }

/* ── Section 2 — recommended next (equal cards) ─────────────────────────── */
.au-rec-grid { display: flex; flex-direction: row; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.au-rec-grid::-webkit-scrollbar { display: none; }
.au-rec-card { flex: 0 0 auto; width: 300px; scroll-snap-align: start; padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color 140ms ease, background 140ms ease; }
.au-rec-card:hover { box-shadow: 0 4px 18px rgba(42,42,42,.14); }
.au-rec-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.au-rec-card__top .au-chip { margin-left: auto; }
.au-rec-card__impact { font: 400 12.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-rec-card__impact b { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-weight: 500; color: var(--au-green); }
.au-rec-card__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--au-ink); }
.au-rec-card__ctx { margin-top: 4px; font: 400 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-rec-card__why { margin-top: 10px; min-height: 35px; display: flex; align-items: flex-start; gap: 7px; font: 400 12px/1.45 "Inter", system-ui, sans-serif; color: var(--au-ink); text-wrap: pretty; }
.au-rec-card__why .material-icons-round { font-size: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--a2-foreground-color-primary, #0265dc); }
.au-rec-card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: stretch; gap: 16px; }
/* Recommended card text matches the home-panel card text exactly */
.au-rec-card .au-rec-card__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: #1B1B1A; }
.au-rec-card .au-rec-card__ctx { margin-top: 4px; font: 400 12px/1.4 "Inter", system-ui, sans-serif; color: var(--a2-color-neutral-500); }
.au-rec-card .au-rec-insight { font-family: "Inter", system-ui, sans-serif; font-size: 13px; line-height: 1.45; }
.au-rec-card .au-rec-card__impact { font: 600 12px/1 "Inter", system-ui, sans-serif; }
/* ── Hero banner ── */
.au-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: linear-gradient(135deg, #DBEDFF 0%, #DCF2F0 50%, #D4F6EB 100%); border-radius: 16px; padding: 40px; margin: 0 0 8px; }
.au-hero__title { margin: 0; font: 600 28px/1.2 "Satoshi","Nunito Sans",system-ui,sans-serif; letter-spacing: -0.02em; color: #14201B; }
.au-hero__sub { margin: 14px 0 0; font: 400 15px/1.55 "Satoshi","Nunito Sans",system-ui,sans-serif; color: #3C4A44; max-width: 360px; }
.au-hero__acts { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.au-hero__cta { height: 44px; padding: 0 20px; border-radius: 10px; flex-direction: row; gap: 7px; font: 600 14px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; }
.au-hero__cta svg { width: 16px; height: 16px; }
.au-hero__later { font: 600 14px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; color: #3C4A44; }
.au-hero__media { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; background: linear-gradient(150deg, #1E2A33 0%, #243A40 55%, #1B3530 100%); overflow: hidden; box-shadow: 0 12px 36px rgba(20,40,40,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
.au-hero__glow { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 25%, rgba(94,202,165,.35) 0%, rgba(63,125,219,.12) 45%, transparent 70%); }
.au-hero__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 66px; height: 66px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.4); transition: transform 140ms ease, background 140ms ease; }
.au-hero__play:hover { transform: translate(-50%,-50%) scale(1.07); background: rgba(255,255,255,.26); }
.au-hero__play svg { width: 26px; height: 26px; margin-left: 3px; }
.au-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); color: #fff; }
.au-hero__bar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.au-hero__time { font: 500 12px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.au-hero__track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); position: relative; }
.au-hero__track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12%; border-radius: 2px; background: #5ECAA5; }
@media (max-width: 720px) { .au-hero { grid-template-columns: 1fr; } }

/* ── Recommended: clean SaaS card (chip → title → outcome → explanation → actions) ── */
.au-rec-grid { gap: 16px; }
.au-rec-card { min-width: 320px; width: 320px; border: 1px solid #E6E6E6; box-shadow: 0 1px 8px 0 rgba(42,42,42,.12); border-radius: 16px; padding: 24px; font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; display: flex; flex-direction: column; }
.au-rec-card:hover { box-shadow: 0 1px 8px 0 rgba(42,42,42,.12); }
.au-rec-card__head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 16px; }
.au-rec-card .au-rec-card__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #14201B; margin-bottom: 12px; }
.au-rec-outcome { font: 600 15px/1.4 "Satoshi","Nunito Sans",system-ui,sans-serif; letter-spacing: -0.01em; margin-bottom: 8px; background: linear-gradient(90deg, #0AA86C 0%, #1B7A4D 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #1B7A4D; width: fit-content; }
.au-rec-explain { margin: 0 0 24px; flex: 1 1 auto; font: 400 13px/1.55 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--a2-color-neutral-500); }
.au-rec-badge { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 3px 10px; border-radius: 20px; font: 500 11px/1.4 "Satoshi","Nunito Sans",system-ui,sans-serif; white-space: nowrap; }
.au-rec-met__atlas { display: block; margin-top: 4px; font: 500 12px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; color: #0C447C; }
.au-rec-met__unit { display: block; margin-top: 6px; font: 400 14px/1.4 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--au-muted); max-width: 180px; }
.au-rec-badge { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px 9px; border-radius: 20px; font: 500 11px/1.6 "Satoshi","Nunito Sans",system-ui,sans-serif; white-space: nowrap; }
/* cool spotlight on the value-prop insight */
.au-rec-insight { margin: 0 0 16px; flex: 1 1 auto; font: 400 13px/1.6 "Inter", system-ui, sans-serif; color: var(--a2-color-neutral-700); padding: 0; border: 0; background: none; }
.au-rec-insight::before { display: none; }
.au-rec-insight strong { font-weight: 600; color: #14201B; }
.au-rec-card.is-off { opacity: 0; transform: scale(.96); transition: opacity 350ms ease, transform 350ms ease; }
/* ── KPI summary row (4 cards) ── */
.au-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.au-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 16px; text-align: left; }
button.au-kpi { cursor: pointer; }
button.au-kpi:hover { box-shadow: 0 4px 16px rgba(42,42,42,.10); }
.au-kpi__label { font: 700 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--au-faint); }
.au-kpi__val { margin-top: 8px; font: 500 28px/1.1 "Satoshi","Nunito Sans",system-ui,sans-serif; letter-spacing: -0.02em; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-kpi__sub { margin-top: 6px; font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-kpi__trend { color: #2a9060; font-weight: 500; }
.au-kpi__health { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.au-kpi__hstat { border: 0; background: transparent; padding: 0; cursor: pointer; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); display: inline-flex; align-items: baseline; gap: 5px; }
.au-kpi__hstat:hover { color: var(--au-ink); }
.au-kpi__hnum { font: 500 20px/1 "Satoshi","Nunito Sans",system-ui,sans-serif; font-variant-numeric: tabular-nums; }
.au-kpi__hsep { color: var(--au-faint); }
@media (max-width: 620px) { .au-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.au-rec-card { min-width: 320px; width: 320px; border: 1px solid #E6E6E6; box-shadow: 0 1px 8px 0 rgba(42,42,42,.12); border-radius: 16px; }
.au-rec-card:hover { box-shadow: 0 1px 8px 0 rgba(42,42,42,.12); }
.au-rec-card__impact--g { color: #2a9060; }
.au-rec-card__impact--b { color: #378ADD; }
.au-rec-card__impact--n { color: #888; }
.au-rec-insight { border-radius: 0; padding: 0; margin: 0 0 16px; font: 400 13px/1.6 "Inter", system-ui, sans-serif; }
.au-rec-insight b { font-weight: 700; }
.au-rec-card.is-off { opacity: 0; transform: scale(.95); transition: opacity 400ms ease, transform 400ms ease; }
/* ── toast ── */
.aurec-toasts { position: fixed; top: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.aurec-toast { display: flex; align-items: flex-start; gap: 10px; width: 320px; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1); padding: 12px 14px; transform: translateX(120%); transition: transform 220ms ease; }
.aurec-toast.is-in { transform: translateX(0); }
.aurec-toast__txt { flex: 1; min-width: 0; }
.aurec-toast__title { font: 500 14px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.aurec-toast__desc { margin-top: 2px; font: 400 12px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.aurec-toast__x { flex: 0 0 auto; width: 18px; height: 18px; border: 0; background: transparent; cursor: pointer; color: var(--au-faint); padding: 0; }
.aurec-toast__x svg { width: 16px; height: 16px; }
/* ── learn-more drawer ── */
.aurec-ov { position: fixed; inset: 0; background: rgba(0,0,0,.25); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 280ms; z-index: 9000; }
.aurec-ov.is-open { opacity: 1; visibility: visible; }
.aurec-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw; background: #fff; box-shadow: -8px 0 28px rgba(0,0,0,.14); transform: translateX(100%); transition: transform 280ms ease; z-index: 9001; display: flex; flex-direction: column; }
.aurec-drawer.is-open { transform: translateX(0); }
.aurec-dr__head { position: relative; padding: 18px; border-bottom: 1px solid var(--au-border); }
.aurec-dr__name { margin-top: 8px; font: 500 17px/1.3 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--au-ink); padding-right: 28px; }
.aurec-dr__tags { margin-top: 3px; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.aurec-dr__x { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border: 0; background: transparent; cursor: pointer; color: var(--au-muted); padding: 0; }
.aurec-dr__x svg { width: 18px; height: 18px; }
.aurec-dr__body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.aurec-dr__desc { margin: 0 0 18px; font: 400 14px/1.6 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.aurec-dr__lbl { font: 700 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--au-faint); margin: 18px 0 8px; }
.aurec-dr__mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--a2-color-neutral-50); font: 400 13px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.aurec-dr__mval { font-weight: 500; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.aurec-dr__step { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font: 400 13px/1.5 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.aurec-dr__num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #1a1a1a; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 500 11px/1 "Inter", system-ui, sans-serif; margin-top: 1px; }
.aurec-dr__foot { padding: 14px 18px; border-top: 1px solid var(--au-border); }
.aurec-dr__foot .btn { width: 100%; justify-content: center; }
/* Recommended card buttons: home-screen primary + outline */
.au-rec-card__foot { margin-top: auto; padding-top: 0; display: flex; align-items: center; gap: 10px; }
.au-rec-card__foot .btn { flex: 1 1 0; height: 40px; padding: 8px 12px; flex-direction: row; gap: 6px; justify-content: center; font: 600 13px/1 var(--a2-font-family-base); border-radius: 16px; }
.aurec-dr__foot .btn { height: 40px; padding: 8px 12px; flex-direction: row; gap: 6px; }
.aurec-dr__foot .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ── Campaign Details drawer (catalog Turn on → Speed-to-Lead) ── */
.aurec-drawer.aucamp { width: 420px; display: flex; flex-direction: column; }
.aucamp__head { display: flex; align-items: center; gap: 10px; padding: 18px 20px; }
.aucamp__title { font: 500 18px/1.2 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--au-ink); }
.aucamp__draft { font: 500 11px/1 "Inter",system-ui,sans-serif; color: var(--au-muted); background: var(--a2-color-neutral-100); padding: 5px 10px; border-radius: 999px; }
.aucamp__body { display: flex; flex-direction: column; padding: 18px 20px; }
.aucamp__field { margin-bottom: 16px; }
.aucamp__label { display: block; margin-bottom: 6px; font: 600 13px/1.3 "Inter",system-ui,sans-serif; color: var(--au-ink); }
.aucamp__req { color: #C53A28; margin-left: 2px; }
.aucamp__input, .aucamp__select { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid var(--au-border); border-radius: 8px; background: #fff; font: 400 14px/1.4 "Inter",system-ui,sans-serif; color: var(--au-ink); }
.aucamp__select { appearance: none; -webkit-appearance: none; padding-right: 36px; color: var(--au-muted); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%239aa0b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.aucamp__select.has-val { color: var(--au-ink); }
.aucamp__input:focus, .aucamp__select:focus { outline: 0; border-color: var(--a2-color-neutral-400); }
.aucamp__help { margin: -8px 0 16px; font: 400 12.5px/1.5 "Inter",system-ui,sans-serif; color: var(--au-muted); }
.aucamp__track { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 8px 0 12px; border: 1px solid var(--au-border); border-radius: 8px; background: #fff; }
.aucamp__track-val { flex: 1; min-width: 0; font: 400 14px/1.4 "Inter",system-ui,sans-serif; color: var(--au-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aucamp__track.is-empty .aucamp__track-val { color: var(--au-muted); }
.aucamp__track.is-empty .aucamp__clear { display: none; }
.aucamp__clear { width: 24px; height: 24px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--au-muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.aucamp__clear:hover { background: var(--a2-color-neutral-100); color: var(--au-ink); }
.aucamp__clear svg { width: 15px; height: 15px; }
.aucamp__track-chev { flex: 0 0 auto; color: var(--au-muted); display: inline-flex; }
.aucamp__track-chev svg { width: 18px; height: 18px; }
.aucamp__acc { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 6px 0; font: 600 14px/1.3 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--au-ink); margin-top: 2px; }
.aucamp__acc-chev { display: inline-flex; color: var(--au-muted); transition: transform 180ms ease; }
.aucamp__acc-chev svg { width: 18px; height: 18px; }
.aucamp__acc[aria-expanded="false"] .aucamp__acc-chev { transform: rotate(-90deg); }
.aucamp__audience { margin-top: 12px; padding: 16px; background: var(--a2-color-neutral-20); border-radius: 10px; }
.aucamp__audience .aucamp__field:last-child { margin-bottom: 0; }
.aucamp__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; }
.aucamp__foot .btn { width: 100%; justify-content: center; height: 40px; }

/* ── Section 3 — custom automations ─────────────────────────────────────── */
.au-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.au-auto { padding: 20px; cursor: pointer; display: flex; flex-direction: column; transition: border-color 140ms ease, background 140ms ease; }
.au-auto:hover { box-shadow: 0 4px 18px rgba(42,42,42,.14); }
.au-auto__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.au-auto__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--au-ink); }
.au-auto__status { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 12.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-auto__desc { margin: 12px 0 0; font: 400 13px/1.5 "Inter", system-ui, sans-serif; color: var(--au-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.au-auto__trigger { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 400 12px/1 "Inter", system-ui, sans-serif; color: var(--au-faint); }
.au-auto__trigger .material-icons-round { font-size: 14px; }
.au-auto__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--au-border); }
.au-auto__runs { font: 400 11.5px/1.4 "Inter", system-ui, sans-serif; color: var(--au-faint); }

/* ── Section 4 — recent runs ────────────────────────────────────────────── */
.au-trail-card { padding: 22px 24px; }
.au-trail { display: flex; flex-direction: column; }
.au-trail__row { display: grid; grid-template-columns: 14px 1fr; gap: 14px; }
.au-trail__row.is-hidden { display: none; }
.au-trail__rail { display: flex; flex-direction: column; align-items: center; }
.au-trail__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; box-shadow: 0 0 0 3px #fff; }
.au-trail__line { flex: 1 1 auto; width: 2px; background: var(--au-border); margin: 4px 0 0; }
.au-trail__row:last-child .au-trail__line { display: none; }
.au-trail__body { padding-bottom: 20px; min-width: 0; }
.au-trail__row:last-child .au-trail__body { padding-bottom: 0; }
.au-trail__head { display: flex; align-items: baseline; gap: 10px; }
.au-trail__agent { font: 600 13.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); text-decoration: none; }
.au-trail__agent:hover { text-decoration: underline; }
.au-trail__time { margin-left: auto; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-faint); white-space: nowrap; }
.au-trail__desc { margin-top: 3px; font: 400 13px/1.5 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-trail__desc b { font-weight: 600; color: var(--au-ink); }
.au-showmore { margin-top: 14px; }
.au-showmore .a2-icon, .au-showmore .material-icons-round { width: 16px; height: 16px; font-size: 16px; transition: transform 160ms ease; }
.au-showmore.is-open .a2-icon, .au-showmore.is-open .material-icons-round { transform: rotate(180deg); }

/* ── Section 5 — footer cards ───────────────────────────────────────────── */
.au-s5 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.au-foot-card { padding: 22px 24px; }
.au-foot-card__title { margin-bottom: 16px; }
.au-health { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.au-health__stat { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.au-health__stat b { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-weight: 500; font-size: 16px; }
.au-health__stat--amber { color: var(--au-amber-strong); }
.au-health__stat--red { color: var(--au-red); }
.au-foot-card__note { margin: 16px 0 0; font: 400 13px/1.5 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--au-bar-track); }
.au-split__active { background: var(--au-blue); }
.au-split__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.au-split__lbl { font: 400 12.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }

/* ── Drawer ─────────────────────────────────────────────────────────────── */
.au-overlay { position: fixed; inset: 0; background: rgba(28,28,28,.28); opacity: 0; pointer-events: none; transition: opacity 220ms ease; z-index: 40; }
.au-overlay.is-open { opacity: 1; pointer-events: auto; }
.au-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw;
  background: #fff; border-left: 1px solid var(--au-border);
  display: flex; flex-direction: column; z-index: 41;
  transform: translateX(100%); transition: transform 240ms cubic-bezier(.4,0,.2,1);
}
.au-drawer.is-open { transform: translateX(0); }
.au-drawer__head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; border-bottom: 1px solid var(--au-border); }
.au-drawer__title { flex: 1; min-width: 0; font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--au-ink); }
.au-drawer__close { width: 32px; height: 32px; border: 0; background: transparent; border-radius: 8px; color: var(--au-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.au-drawer__close:hover { background: var(--a2-color-neutral-20); color: var(--au-ink); }
.au-drawer__close .material-icons-round { font-size: 20px; }
.au-drawer__body { flex: 1; overflow: auto; padding: 22px 24px 28px; }
.au-drawer__foot { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--au-border); }

.au-desc-field { width: 100%; border: 0; resize: none; background: transparent; font: 400 14px/1.55 "Inter", system-ui, sans-serif; color: var(--au-ink); padding: 0; margin-bottom: 24px; }
.au-desc-field:focus { outline: none; }
.au-desc-field::placeholder { color: var(--au-faint); }

.au-when { font: 700 11px/1 "Inter", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--au-faint); margin: 0 0 12px; }
.au-when:not(:first-child) { margin-top: 24px; }
/* numbered When/If/Then step layout (matches the automation-builder reference) */
.au-steps { display: flex; flex-direction: column; }
.au-step { display: flex; gap: 16px; }
.au-step__rail { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.au-step__num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--a2-background-color-primary-faint, #e7f0fb); color: var(--a2-color-blue-700, #0a50a0); display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 "Inter", system-ui, sans-serif; }
.au-step__rail::after { content: ""; flex: 1 1 auto; width: 1px; background: var(--au-border); margin: 6px 0; }
.au-step:last-child .au-step__rail::after { display: none; }
.au-step__main { flex: 1 1 auto; min-width: 0; padding-bottom: 28px; }
.au-step:last-child .au-step__main { padding-bottom: 0; }
.au-step__title { font: 700 18px/1.2 "Satoshi","Nunito Sans",system-ui,sans-serif; color: var(--au-ink); }
.au-step__sub { margin: 4px 0 14px; font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-stepnote { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--a2-background-color-primary-faint, #eef4fb); border-radius: 8px; font: 400 13px/1.45 "Inter", system-ui, sans-serif; color: var(--au-ink); margin-bottom: 4px; }
.au-stepnote b { font-weight: 600; }
.au-stepnote .material-icons-round { font-size: 18px; flex: 0 0 auto; color: var(--a2-color-blue-600, #0265dc); }
.au-block { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--au-border); border-radius: 8px; margin-bottom: 10px; cursor: pointer; position: relative; }
.au-block:hover { border-color: var(--a2-color-neutral-300); }
.au-block__ic { width: 30px; height: 30px; border-radius: 7px; background: #fff; border: 1px solid var(--au-border); display: inline-flex; align-items: center; justify-content: center; color: var(--au-muted); flex: 0 0 auto; }
.au-block__ic .material-icons-round { font-size: 17px; }
.au-block__ic .a2-icon { width: 17px; height: 17px; }
.au-block__txt { flex: 1; min-width: 0; font: 400 13.5px/1.4 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.au-block__txt b { font-weight: 600; }
.au-block__chev { color: var(--au-faint); display: inline-flex; }
.au-block__chev .material-icons-round { font-size: 20px; }
.au-block__chev .a2-icon { width: 20px; height: 20px; }
.au-add { display: inline-flex; align-items: center; gap: 5px; margin: 2px 0 6px; }
.au-add .material-icons-round { font-size: 16px; }
.au-add .a2-icon { width: 16px; height: 16px; }
.au-auto__trigger .a2-icon { width: 14px; height: 14px; }
.au-add-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 4px; }

/* drawer dropdowns + paused notice */
.au-dd { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--au-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,17,24,.14); padding: 4px; }
.au-dd__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; font: 400 13.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.au-dd__opt:hover { background: #F4F6F8; }
.au-dd__opt svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--au-blue); }
.au-paused { margin: 0 0 16px; padding: 9px 12px; border-radius: 8px; background: #FBEFD8; color: #9A6B0E; font: 500 12.5px/1.4 "Inter", system-ui, sans-serif; }

/* recommended enabled state + spinner */
.au-rec-card .btn.is-enabled { background: var(--au-green); border-color: var(--au-green); color: #fff; box-shadow: none; }
.au-rec-card .btn.is-enabled svg { width: 14px; height: 14px; }
.au-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: auspin .7s linear infinite; }
@keyframes auspin { to { transform: rotate(360deg); } }

/* toasts */
.au-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.au-toast { width: 320px; padding: 16px; background: #fff; border-radius: 8px; border-left: 3px solid var(--au-green); box-shadow: 0 8px 28px rgba(15,17,24,.18); display: flex; align-items: flex-start; gap: 10px; transform: translateX(120%); transition: transform 260ms cubic-bezier(.4,0,.2,1); }
.au-toast.is-in { transform: none; }
.au-toast__ic { color: var(--au-green); flex: 0 0 auto; margin-top: 1px; }
.au-toast__ic svg { width: 18px; height: 18px; }
.au-toast__txt { font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); min-width: 0; }
.au-toast__txt b { display: block; font-weight: 600; color: var(--au-ink); }
.au-toast__txt a { color: var(--au-blue); text-decoration: none; }

/* ── reorganized layout: main column + sticky right widget ── */
.au-layout { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 28px; align-items: start; }
.au-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#au-all { margin-top: 24px; }
.au-rail { align-self: start; }

/* KPI cards — automation health */
.au-healthbar { display: flex; align-items: stretch; padding: 18px 0; }
.au-hstat { flex: 1; display: flex; align-items: flex-start; gap: 11px; padding: 2px 24px; min-width: 0; }
.au-hstat + .au-hstat { border-left: 1px solid var(--au-border); }
.au-hstat .au-dot { margin-top: 9px; }
.au-hstat__num { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-hstat__lbl { margin-top: 6px; font: 400 13px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-hstat__note { margin-top: 6px; font: 400 11.5px/1.4 "Inter", system-ui, sans-serif; color: var(--au-faint); max-width: 30ch; }

/* Fully automated jobs — sparkline, thin bar, 2x2 grid */
.au-spark { width: 100%; height: 60px; display: block; margin: 16px 0 8px; }
.au-fabar { height: 6px; border-radius: 999px; background: var(--a2-color-neutral-100); overflow: hidden; }
.au-fabar__fill { height: 100%; border-radius: 999px; background: var(--a2-color-blue-600); }
.au-fa__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--au-border); }
.au-fa__cell { display: flex; flex-direction: column; gap: 4px; }
.au-fa__cell .au-fa__k { font: 400 12px/1.2 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fa__cell .au-fa__v { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 15px; font-weight: 500; color: var(--au-ink); font-variant-numeric: tabular-nums; }

/* (legacy KPI tiles removed — superseded by the 4-card KPI row above) */

/* all-automations table */
.au-tablewrap { background: #fff; border-radius: 16px; border: 1px solid #E6E6E6; box-shadow: none; overflow: hidden; }
.au-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.au-table th { text-align: left; font: 700 10.5px/1 "Inter", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--au-faint); padding: 15px 20px; background: #FAFBFC; border-bottom: 1px solid var(--au-border); white-space: nowrap; }
.au-table td { padding: 14px 20px; border-bottom: 1px solid var(--a2-color-neutral-50); vertical-align: middle; }
.au-table tbody tr:last-child td { border-bottom: 0; }
.au-table tbody tr { transition: background 120ms ease; }
.au-table tbody tr:hover { background: #FAFBFC; }
.au-table__r { text-align: right; }
.au-trow__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--au-ink); }
.au-trow__sub { margin-top: 2px; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-trow__area { font: 400 13px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }

/* status chip variants for the table */
.au-chip--inactive { background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-700); }
.au-dot--off { background: var(--a2-color-neutral-400); }

/* recent-runs sticky widget */
.au-widget { padding: 20px; }
.au-widget__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.au-widget__title { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--au-ink); }
.au-widget__sub { font: 400 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-widget .au-trail__agent { font-size: 12.5px; }
.au-widget .au-trail__time { font-size: 11px; }
.au-widget .au-trail__desc { font-size: 12px; margin-top: 2px; }
.au-widget .au-trail__body { padding-bottom: 16px; }

/* ── Row 1: North Star + health (redesign) ── */
.au-row1 { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 20px; align-items: stretch; }
.au-health3 { display: grid; grid-template-rows: repeat(3, 1fr); gap: 20px; min-width: 0; }

/* North Star card */
.au-ns { padding: 24px 26px; display: flex; flex-direction: column; }
.au-ns__eyebrow { font: 700 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--au-faint); }
.au-ns__metric { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; }
.au-ns__big { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--au-ink); }
.au-ns__delta { font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--au-green); }
.au-ns__chart { width: 100%; height: 80px; display: block; margin: 18px 0 0; }
.au-ns__pills { display: flex; align-items: stretch; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--au-border); }
.au-ns__pill { flex: 1; padding: 0 16px; min-width: 0; }
.au-ns__pill:first-child { padding-left: 0; }
.au-ns__pill + .au-ns__pill { border-left: 1px solid var(--au-border); }
.au-ns__pillv { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 16px; font-weight: 500; color: var(--au-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-ns__pillk { margin-top: 4px; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }

/* health metric cards (sparkline inside, VAPI-style) */
.au-hc { padding: 18px 20px; display: flex; flex-direction: column; }
.au-hc__top { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-hc__num { margin-top: 8px; font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 30px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--au-ink); }
.au-hc__spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: auto; padding-top: 14px; }
.au-hc__spark span { flex: 1; border-radius: 2px; min-height: 2px; }
.au-hc__spark--green span { background: var(--au-green); }
.au-hc__spark--amber span { background: var(--au-amber); }
.au-hc__spark--red span { background: var(--au-red); }
.au-hc__note { margin-top: 12px; font: 400 11.5px/1.4 "Inter", system-ui, sans-serif; color: var(--au-faint); }

/* AI automation funnel — vertical bar chart */
.au-fn2card { padding: 24px 28px; }
.au-fn2 { margin-top: 20px; }
.au-fn2__bars { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; align-items: end; height: 230px; padding: 0 6px; border-bottom: 1px solid var(--a2-color-neutral-200); }
.au-fn2__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--au-border); opacity: .55; }
.au-fn2__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.au-fn2__lab { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 10px; }
.au-fn2__pct { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 15px; font-weight: 500; color: var(--au-ink); }
.au-fn2__flag { font: 400 11px/1 "Inter", system-ui, sans-serif; color: var(--au-amber-strong); }
.au-fn2__col.is-bottleneck .au-fn2__pct { color: var(--au-amber-strong); }
.au-fn2__bar { position: relative; width: 100%; max-width: 72px; border-radius: 6px 6px 0 0; background: var(--a2-color-neutral-100); overflow: hidden; }
.au-fn2__ai { position: absolute; left: 0; right: 0; bottom: 0; background: var(--a2-color-blue-600); }
.au-fn2__col.is-bottleneck .au-fn2__ai { background: var(--au-amber); }
.au-fn2__xaxis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px; margin-top: 14px; padding: 0 6px; }
.au-fn2__x { text-align: center; min-width: 0; }
.au-fn2__stage { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--au-ink); }
.au-fn2__agent { margin-top: 3px; font: 400 11px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fn2card .au-fn__insight { margin-top: 22px; }

/* ── centered header + inline prompt bar ── */
.au-head--center { text-align: center; margin-bottom: 24px; }
.au-head--center .au-head__sub { margin-left: auto; margin-right: auto; }
.au-promptbar { margin: 0 0 24px; }
.au-promptbar .composer { width: 100%; box-shadow: none; border: 1px solid var(--au-border); }
.au-promptbar .composer:focus-within { box-shadow: none; border-color: var(--a2-color-neutral-300); }

/* full-width recent-runs card at the bottom */
.au-runscard { padding: 20px 24px; }
.au-runscard .au-trail__desc { font-size: 13px; }

/* North Star area chart with axes */
.au-chart { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 80px auto; column-gap: 8px; row-gap: 7px; margin: 16px 0 4px; }
.au-chart__y { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font: 400 10px/1 "Inter", system-ui, sans-serif; color: var(--au-faint); }
.au-chart__plot { grid-row: 1; grid-column: 2; position: relative; }
.au-chart__grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--au-border); opacity: .5; }
.au-chart__x { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; font: 400 10px/1 "Inter", system-ui, sans-serif; color: var(--au-faint); }
.au-ns__chart { width: 100%; height: 80px; display: block; }

/* health card 7-day axis labels */
.au-hc__days { display: flex; gap: 4px; margin-top: 6px; }
.au-hc__days span { flex: 1; text-align: center; font: 400 9.5px/1 "Inter", system-ui, sans-serif; color: var(--au-faint); }

/* funnel: legend + value axes */
.au-fn2__legend { display: inline-flex; align-items: center; gap: 16px; }
.au-fn2__lg { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fn2__sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.au-fn2__sw--ai { background: var(--a2-color-blue-600); }
.au-fn2__sw--man { background: var(--a2-color-neutral-100); box-shadow: inset 0 0 0 1px var(--a2-color-neutral-200); }
.au-fn2__plot { display: flex; gap: 10px; align-items: stretch; }
.au-fn2__yaxis { position: relative; width: 34px; height: 200px; flex: 0 0 auto; }
.au-fn2__yaxis span { position: absolute; right: 0; transform: translateY(50%); font: 400 10.5px/1 "Inter", system-ui, sans-serif; color: var(--au-faint); white-space: nowrap; }
.au-fn2__bars { flex: 1; height: 200px; }
.au-fn2__xaxis { padding-left: 44px; }

@media (max-width: 1080px) {
  .au-page { overflow: auto; }
  .au-s1 { grid-template-columns: 1fr; }
  .au-grid3 { grid-template-columns: 1fr; }
  .au-row1 { grid-template-columns: 1fr; }
  .au-health3 { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
}

/* ════ revision: white bg · 400px prompt · horizontal health + funnel · timeline ════ */
.au-page { background: #F7F7F7; }
.au-promptbar { max-width: 400px; margin: 0 auto 40px; }
.au-promptbar .composer { width: 100%; }

/* base composer (pill + icon buttons) — Automations doesn't load the Workspace
   inline styles, so define the base here, scoped to the prompt bar. */
.au-promptbar .composer { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 8px 0 16px; box-sizing: border-box; background: #fff; border: 1px solid var(--au-border); border-radius: 999px; transition: border-color 200ms cubic-bezier(0,0,.4,1); }
.au-promptbar .composer:focus-within { border-color: var(--a2-color-neutral-300); }
.au-promptbar .composer input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 16px/1.5 "Inter","Nunito Sans",system-ui,sans-serif; color: var(--a2-color-neutral-900); }
.au-promptbar .composer input::placeholder { color: var(--a2-color-neutral-400); }
.au-promptbar .composer__add, .au-promptbar .composer__mic { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--a2-color-neutral-500); transition: background-color 200ms cubic-bezier(0,0,.4,1), color 200ms cubic-bezier(0,0,.4,1); }
.au-promptbar .composer__add:hover, .au-promptbar .composer__mic:hover { background: color-mix(in srgb, var(--a2-color-neutral-950) 6%, transparent); color: var(--a2-color-neutral-900); }
.au-promptbar .composer__add svg, .au-promptbar .composer__mic svg { width: 20px; height: 20px; display: block; }
.au-promptbar .composer__send { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 50%; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--a2-color-neutral-900); color: #fff; transition: background-color 200ms cubic-bezier(0,0,.4,1); }
.au-promptbar .composer__send:hover { background: var(--a2-color-neutral-950); }
.au-promptbar .composer__send svg { width: 18px; height: 18px; display: block; }
.au-promptbar .composer__add:focus-visible, .au-promptbar .composer__mic:focus-visible, .au-promptbar .composer__send:focus-visible { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }

/* health: compact inline strip (one bordered row, dot + value + label) */
.au-hcards { display: flex; align-items: stretch; gap: 0; padding: 6px 0; }
.au-hc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: row; align-items: baseline; gap: 8px; padding: 8px 22px; border-left: 1px solid var(--au-border); }
.au-hc:first-child { border-left: 0; }
.au-hc__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; align-self: center; }
.au-hc__dot--green { background: var(--au-green); }
.au-hc__dot--amber { background: var(--au-amber); }
.au-hc__dot--red { background: var(--au-red); }
.au-hc__num { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-hc__top { font: 600 12.5px/1.2 "Inter", system-ui, sans-serif; color: var(--au-muted); text-transform: none; letter-spacing: 0; }
.au-hc__num { margin-top: 10px; font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-hc__note { margin-top: 10px; font: 400 11.5px/1.4 "Inter", system-ui, sans-serif; color: var(--au-faint); }

/* Fully automated + funnel side by side */
.au-s1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.au-s1col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.au-s1col > .au-card { flex: 1; }
.au-fn-row { cursor: default; border-radius: 8px; transition: background 120ms ease; }
.au-fn-row:hover { background: #FAFBFC; }
.au-tip { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity 120ms ease; background: #fff; border: 1px solid var(--a2-color-neutral-100); box-shadow: var(--a2-shadow-large, 0 10px 30px rgba(15,17,24,.16)); border-radius: 11px; padding: 11px 13px; min-width: 168px; }
.au-tip.is-show { opacity: 1; transform: translateY(0); }
.au-tip__t { font: 600 12.5px/1.2 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.au-tip__r { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 7px; font: 400 12px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-tip__r b { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-weight: 500; color: var(--au-ink); }
.au-tip__sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.au-fn { padding: 22px 24px; display: flex; flex-direction: column; }
.au-fn .au-fn__head { margin-bottom: 16px; }
.au-fn .au-fn__list { margin-top: 0; }

/* ── AI automation funnel (redesigned, interactive) ── */
.au-fn#au-funnel { padding: 20px; }
.fn-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 16px; margin-bottom: 16px; }
.fn-title { font: 600 15px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.fn-sub { margin-top: 3px; font: 400 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--a2-color-neutral-50); border-radius: 999px; flex: 0 0 auto; }
.fn-tg { border: 1px solid transparent; background: transparent; cursor: pointer; padding: 5px 12px; border-radius: 999px; font: 500 12.5px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-tg.is-active { background: #fff; border-color: var(--au-border); color: var(--au-ink); }
.fn-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 4px; }
.fn-legend__l { display: flex; gap: 16px; }
.fn-leg { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-dot { width: 8px; height: 8px; border-radius: 50%; }
.fn-dot--ai { background: #378ADD; }
.fn-dot--hm { background: #C2C8D0; }
.fn-legend__r { font: 500 12px/1 "Inter", system-ui, sans-serif; color: var(--au-green); }
.fn-list { margin-top: 12px; }
/* funnel stages as an expandable card grid (revenue-pipeline card style) */
.fn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.fn-card { background: #fff; border: 1px solid var(--au-border); border-radius: 14px; padding: 16px; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease; }
.fn-card:hover { box-shadow: 0 4px 18px rgba(42,42,42,.10); }
.fn-card:focus-visible { outline: 2px solid var(--a2-color-blue-600); outline-offset: 2px; }
.fn-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fn-card__id { min-width: 0; }
.fn-card .fn-mid { margin-top: 14px; }
.fn-card.is-open .fn-chev { transform: rotate(180deg); }
/* bottleneck card — amber accent */
.fn-card.is-bn { border-color: #E6CF9A; background: #FFFCF5; }
.fn-card.is-bn .fn-name { color: #BA7517; }
.fn-card.is-bn .fn-bar i { background: #EF9F27; }
.fn-card.is-bn .fn-pct { color: #BA7517; }
.fn-card.is-bn .fn-tag--ai { color: #BA7517; }
/* touchpoint detail inside an expanded card spans full width */
.fn-card .fn-det { padding: 14px 0 2px; border-top: 1px dashed var(--a2-color-neutral-80); margin-top: 14px; }
@media (max-width: 880px) { .fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Browse-all link in the Recommended-next header */
.au-browseall { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--a2-foreground-color-primary, #0265dc); text-decoration: none; white-space: nowrap; }
.au-browseall:hover { text-decoration: underline; }
.au-browseall svg { width: 15px; height: 15px; }
/* family divider rows in the All-automations list */
.au-cat__family { padding: 14px 4px 7px; font: 700 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--au-faint); border-top: 1px solid var(--au-border); }
.au-cat__list > .au-cat__family:first-child { border-top: 0; padding-top: 4px; }
/* predicted-impact under the Turn-on button */
.au-cat__turnwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.au-cat__pred { font: 500 11.5px/1 "Inter", system-ui, sans-serif; color: var(--au-green); opacity: .8; white-space: nowrap; }
.fn-rowwrap { border-top: 1px solid var(--a2-color-neutral-50); }
.fn-rowwrap:first-child { border-top: 0; }
.fn-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; cursor: pointer; }
.fn-name { font: 500 13.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.fn-jobs { margin-top: 2px; font: 400 11.5px/1.2 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-mid { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fn-barline { display: flex; align-items: center; gap: 8px; }
.fn-tag { width: 18px; flex: 0 0 auto; font: 600 10px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-tag--ai { color: #0C447C; }
.fn-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--a2-color-neutral-50); overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: 999px; background: #378ADD; }
.fn-bar--hm { height: 5px; }
.fn-bar--hm i { background: #C2C8D0; }
.fn-pct { flex: 0 0 auto; width: 38px; text-align: right; font: 600 12.5px/1 "Inter", system-ui, sans-serif; color: #0C447C; font-variant-numeric: tabular-nums; }
.fn-pct--hm { color: var(--au-muted); font-weight: 500; }
.fn-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.fn-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 11px/1 "Inter", system-ui, sans-serif; white-space: nowrap; }
.fn-badge--lift { background: #E6F4EA; color: #1B7A43; }
.fn-badge--bn { background: #FBEFD8; color: #BA7517; }
.fn-chev { width: 16px; height: 16px; color: var(--au-faint); transition: transform .18s ease; flex: 0 0 auto; }
.fn-row.is-open .fn-chev { transform: rotate(180deg); }
/* bottleneck row — amber */
.fn-row.is-bn .fn-name { color: #BA7517; }
.fn-row.is-bn .fn-bar i { background: #EF9F27; }
.fn-row.is-bn .fn-pct { color: #BA7517; }
.fn-row.is-bn .fn-tag--ai { color: #BA7517; }
/* expanded touchpoint detail */
.fn-det { padding: 4px 0 14px 144px; border-top: 1px dashed var(--a2-color-neutral-80); margin-top: -1px; }
.fn-det__hd { display: grid; grid-template-columns: 1.4fr 1.6fr 70px; gap: 14px; padding: 12px 0 8px; font: 600 10.5px/1 "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--au-faint); }
.fn-det__hd.is-vs { grid-template-columns: 1.4fr 1.3fr 1.3fr 70px; }
.fn-det__r { text-align: right; }
.fn-det__empty { padding: 14px 0; font: 400 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-tp { display: grid; grid-template-columns: 1.4fr 1.6fr 70px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--a2-color-neutral-50); }
.fn-tp.is-vs { grid-template-columns: 1.4fr 1.3fr 1.3fr 70px; }
.fn-tp__t { font: 500 12.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.fn-tp__m { margin-top: 2px; font: 400 11px/1.2 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-tp__cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fn-tp__bar { flex: 1; height: 5px; border-radius: 999px; background: var(--a2-color-neutral-50); overflow: hidden; }
.fn-tp__bar i { display: block; height: 100%; border-radius: 999px; background: #378ADD; }
.fn-tp__bar--hm i { background: #C2C8D0; }
.fn-tp__v { flex: 0 0 auto; font: 700 12px/1 "Inter", system-ui, sans-serif; color: #0C447C; font-variant-numeric: tabular-nums; }
.fn-tp__v--hm { color: var(--au-muted); font-weight: 600; }
.fn-tp__vol { flex: 0 0 auto; font: 400 11px/1 "Inter", system-ui, sans-serif; color: var(--au-faint); }
.fn-tp__lift { display: flex; justify-content: flex-end; }
.fn-insight { margin: 0; padding-top: 14px; border-top: 1px solid var(--au-border); font: 400 12.5px/1.5 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.fn-insight b { font-weight: 600; color: #BA7517; }

/* ── All automations catalog (search · filters · pagination) ── */
.au-catalog { padding: 0; overflow: hidden; }
.au-cat__bar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--au-border); flex-wrap: wrap; }
.au-cat__search { display: flex; align-items: center; gap: 8px; flex: 1 1 240px; min-width: 200px; height: 38px; padding: 0 12px; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; background: #fff; color: var(--au-faint); }
.au-cat__search:focus-within { border-color: var(--a2-color-neutral-300); }
.au-cat__search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.au-cat__search input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 14px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.au-cat__sel { height: 38px; padding: 0 12px; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; background: #fff; font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); cursor: pointer; }
.au-cat__count { margin-left: auto; font: 400 13px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); white-space: nowrap; }
.au-cat__list { display: flex; flex-direction: column; }
.au-cat__row { display: grid; grid-template-columns: minmax(0,1fr) 110px 130px 120px; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--a2-color-neutral-50); }
.au-cat__row:last-child { border-bottom: 0; }
.au-cat__main { min-width: 0; }
.au-cat__area { font: 400 13px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-cat__end { display: flex; justify-content: flex-end; }
.au-cat__metric { font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); font-variant-numeric: tabular-nums; }
/* card grid (4 per row) */
.au-cat__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 20px; }
.au-cat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--au-border); border-radius: 12px; padding: 14px; min-width: 0; transition: border-color 140ms ease, box-shadow 140ms ease; }
.au-cat-card:hover { box-shadow: 0 4px 16px rgba(42,42,42,.10); }
.au-cat-card.is-custom { border-color: #C9D2EC; background: #FBFCFE; }
.au-cat-card__head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.au-tag { display: inline-flex; align-items: center; font: 700 10px/1 "Inter", system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; }
.au-tag--custom { background: #E7E9FB; color: #4338A8; }
.au-cat-card__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--au-ink); }
.au-cat-card__desc { margin: 5px 0 0; font: 400 12px/1.45 "Inter", system-ui, sans-serif; color: var(--au-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.au-cat-card__meta { display: flex; align-items: center; gap: 5px; margin-top: 10px; font: 400 11.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-faint); }
.au-cat-card__meta .material-icons-round { font-size: 14px; flex: 0 0 auto; }
.au-cat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; }
.au-cat-card__metric { font: 500 13px/1.3 "Inter", system-ui, sans-serif; color: var(--au-ink); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-cat-card__pred { font: 500 11.5px/1.2 "Inter", system-ui, sans-serif; color: var(--au-green); opacity: .85; white-space: nowrap; }
.au-cat-card__foot .au-btn--sm { flex: 0 0 auto; }
@media (max-width: 1100px) { .au-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.au-cat__empty { padding: 32px 20px; text-align: center; font: 400 14px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-cat__pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--au-border); flex-wrap: wrap; }
.auc-pg__pages { display: flex; align-items: center; gap: 4px; }
.auc-pg__num { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font: 500 14px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.auc-pg__num:hover { background: var(--a2-color-neutral-50); }
.auc-pg__num.is-active { border-color: var(--a2-color-blue-600, #0265dc); color: var(--a2-color-blue-600, #0265dc); font-weight: 600; }
.auc-pg__arrow { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; background: #fff; cursor: pointer; color: var(--au-ink); }
.auc-pg__arrow svg { width: 18px; height: 18px; }
.auc-pg__arrow:hover:not(:disabled) { background: var(--a2-color-neutral-50); }
.auc-pg__arrow:disabled { opacity: .4; cursor: default; }
.auc-pg__right { display: flex; align-items: center; gap: 12px; }
.auc-pg__lbl { font: 400 14px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); white-space: nowrap; }
.auc-pg__per { height: 36px; padding: 0 10px; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; background: #fff; font: 500 14px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); cursor: pointer; }
.auc-pg__range { font: 400 14px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-cat__pg { height: 32px; padding: 0 14px; border: 1px solid var(--a2-color-neutral-200); border-radius: 8px; background: #fff; font: 500 13px/1 "Inter", system-ui, sans-serif; color: var(--au-ink); cursor: pointer; }
.au-cat__pg:hover:not(:disabled) { background: #FAFBFC; }
.au-cat__pg:disabled { opacity: .45; cursor: default; }
.au-cat__pginfo { font: 400 13px/1 "Inter", system-ui, sans-serif; color: var(--au-muted); font-variant-numeric: tabular-nums; }
/* ── catalog as a table (search + pill filters above) ── */
.au-catalog { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.auc-bar { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; flex-wrap: wrap; }
.auc-bar .au-cat__search { flex: 0 0 360px; max-width: 360px; height: 34px; border-radius: 999px; border: 1px solid #E9EEF2; box-shadow: 0 1px 2px rgba(42,42,42,.04); background: var(--background-color, #fff); }
.auc-bar .au-cat__search input { font: 400 13px/1 var(--a2-font-family-base); }
/* filter pills match the home page .flt exactly (native size, fully rounded) */
.auc-bar .flt { height: 34px; border-radius: 999px; padding: 0 12px; font: 600 13px/1 var(--a2-font-family-base); }
.auc-bar .flt-wrap { position: relative; }
.auc-bar .flt-menu { position: absolute; top: calc(100% + 6px); left: 0; right: auto; bottom: auto; min-width: 210px; z-index: 60; }
#au-catalog .flt-opt { width: 100%; border: 0; background: transparent; text-align: left; box-shadow: none; }
#au-catalog .flt-opt:hover { background: var(--a2-color-neutral-20); }
#au-catalog .flt-opt__box { width: 18px; height: 18px; border: 1.5px solid var(--a2-color-neutral-300); border-radius: 5px; background: #fff; color: #fff; }
#au-catalog .flt-opt.is-sel .flt-opt__box { background: var(--a2-color-blue-600, #0265dc); border-color: var(--a2-color-blue-600, #0265dc); }
#au-catalog .flt-opt__box svg { width: 13px; height: 13px; }
#au-catalog .flt-opt:not(.is-sel) .flt-opt__box svg { display: none; }
#au-catalog .flt-opt.is-sel .flt-opt__box svg { opacity: 1; }
/* collapsible stage group header rows */
.auc-grp { cursor: pointer; background: var(--a2-color-neutral-50); }
.auc-grp:hover { background: var(--a2-color-neutral-100); }
.auc-grp td { padding: 10px 16px !important; border-bottom: 1px solid var(--au-border) !important; background: var(--a2-color-neutral-50); }
.auc-grp:hover td { background: var(--a2-color-neutral-100); }
.auc-grp__chev { width: 16px; height: 16px; vertical-align: middle; margin-right: 8px; transition: transform 160ms ease; color: var(--au-muted); }
.auc-grp.is-collapsed .auc-grp__chev { transform: rotate(-90deg); }
.auc-grp__name { font: 700 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--au-ink); vertical-align: middle; }
.auc-grp__count { margin-left: 8px; font: 600 11px/1 "Inter", system-ui, sans-serif; color: var(--a2-color-neutral-700); background: var(--a2-color-neutral-100); padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.auc-bar .flt-wrap { flex: 0 0 auto; }
.auc-clear { flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; padding: 0 6px; height: 34px; font: 600 13px/1 var(--a2-font-family-base); color: var(--a2-color-blue-600, #0265dc); }
.auc-clear:hover { text-decoration: underline; }
.auc-clear[hidden] { display: none; }
.auc-tablecard { padding: 0; overflow: hidden; box-shadow: none; border: 1px solid var(--au-border); border-radius: 12px; }
.auc-tablewrap { width: 100%; overflow-x: auto; }
.auc-table { width: 100%; border-collapse: collapse; }
.auc-table thead th { text-align: left; padding: 10px 16px; font: 600 11px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--au-ink); border-bottom: 1px solid var(--au-border); white-space: nowrap; background: #fff; }
.auc-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--a2-color-neutral-50); font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-ink); vertical-align: middle; }
.auc-table tbody tr:hover td { background: #FAFBFC; }
.auc-namecell { min-width: 240px; }
.auc-tname { display: flex; align-items: center; gap: 8px; font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 14px; font-weight: 500; color: var(--au-ink); }
.auc-tdesc { margin-top: 2px; font: 400 12px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); max-width: 420px; }
.auc-stage, .auc-trigger { color: var(--au-muted); white-space: nowrap; }
.auc-metric { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.auc-perf { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.auc-perf .auc-metric { font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-ink); }
.auc-perf .auc-pred { font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-green); white-space: nowrap; }
.auc-perf2 { font: 400 12px/1.35 "Inter", system-ui, sans-serif; color: var(--au-muted); white-space: nowrap; }
.auc-perf2--up { color: #1B7A4D; }
.auc-pred { font: 500 12px/1.2 "Inter", system-ui, sans-serif; color: var(--au-green); white-space: nowrap; }
.auc-actcell { text-align: right; white-space: nowrap; }
.au-fn-row { display: grid; grid-template-columns: 140px 1fr 56px; align-items: center; gap: 14px; padding: 9px 0; }
.au-fn-row__lead { min-width: 0; }
.au-fn-row__name { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--au-ink); }
.au-fn-row__agent { margin-top: 2px; font: 400 11.5px/1.3 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-fn-row__track { min-width: 0; }
.au-fn-bar { position: relative; height: 16px; border-radius: 999px; background: #fff; border: 1px solid var(--a2-color-neutral-200); }
.au-fn-bar__ai { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 999px; background: var(--a2-color-blue-600); }
.au-fn-row.is-bottleneck .au-fn-bar__ai { background: var(--au-amber); }
.au-fn-row.is-bottleneck .au-fn-row__name { color: var(--au-amber-strong); }
.au-fn-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.au-fn-row__pct { font-family: "Satoshi","Nunito Sans",system-ui,sans-serif; font-size: 14px; font-weight: 500; color: var(--au-ink); font-variant-numeric: tabular-nums; }
.au-fn-row.is-bottleneck .au-fn-row__pct { color: var(--au-amber-strong); }
.au-fn-row__tag--bottleneck { font: 400 9.5px/1 "Inter", system-ui, sans-serif; color: var(--au-amber-strong); white-space: nowrap; }
.au-fn .au-fn__insight { margin-top: auto; padding-top: 16px; }

/* Recent runs — neutral timeline */
.au-runscard { padding: 24px 28px; }
.au-trail__row { display: grid; grid-template-columns: 16px 1fr; gap: 16px; }
.au-trail__rail { display: flex; flex-direction: column; align-items: center; }
.au-trail__node { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--a2-color-neutral-300); background: #fff; flex: 0 0 auto; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; }
.au-trail__node--done { border-color: var(--a2-color-blue-600); background: var(--a2-color-blue-600); }
.au-trail__node--done svg { width: 11px; height: 11px; }
.au-trail__line { width: 2px; flex: 1 1 auto; background: var(--a2-color-neutral-200); margin: 4px 0 0; }
.au-trail__row:last-child .au-trail__line { display: none; }
.au-trail__body { min-width: 0; padding-bottom: 24px; }
.au-trail__row:last-child .au-trail__body { padding-bottom: 0; }
.au-trail__head { display: flex; align-items: baseline; gap: 12px; }
.au-trail__txt { font: 400 14px/1.4 "Inter", system-ui, sans-serif; color: var(--au-muted); }
.au-trail__txt b { font-weight: 600; color: var(--au-ink); }
.au-trail__time { margin-left: auto; font: 400 13px/1.4 "Inter", system-ui, sans-serif; color: var(--au-faint); white-space: nowrap; }
.au-trail__card { border: 1px solid var(--au-border); border-radius: 12px; padding: 14px 16px; }
.au-trail__note { margin-top: 8px; font: 400 14px/1.55 "Inter", system-ui, sans-serif; color: var(--au-muted); }