/*
  Workora application styles.

  Hand-authored rather than generated: the app needs no build step, no package manager, and no
  vendored framework to render, which keeps deployment to "copy the published output".
  Everything is driven by the tokens below, so a visual change is a change to this block.
*/

:root {
    /*
      Navy and a considered blue, rather than the violet that every AI product reaches for.
      Business software is judged on whether it looks like it can be trusted with the work, and
      the palette is the first thing that answers.
    */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-muted: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #020617;
    --text-muted: #475569;
    --accent: #0369a1;
    --accent-hover: #075985;
    --accent-contrast: #ffffff;
    --accent-soft: #e0f2fe;
    --accent-border: #7dd3fc;
    --danger: #b42318;
    --danger-soft: #fef3f2;
    --success: #15803d;
    --success-soft: #f0fdf4;
    --warning: #b45309;
    --warning-soft: #fffbeb;

    /*
      What a thing is doing, in colour. One set for the whole product: a run on the activity page,
      an agent on the company floor and a task in a list all mean the same thing by green, so they
      are all painted from here rather than from four opinions.
    */
    --status-running: #16a34a;
    --status-waiting: #f59e0b;
    --status-idle: #94a3b8;
    --status-paused: #64748b;
    --status-failed: #b42318;

    --radius: 10px;
    --radius-sm: 6px;
    --sidebar-width: 252px;

    /*
      Plus Jakarta Sans first for anyone who has it, then each platform's own interface face.
      No webfont is fetched: the app has no build step and no outbound calls, and a font that
      fails to load on a locked-down host is worse than one that was never asked for.
    */
    --font: "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
        "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    /* Layered rather than one blur, so a card reads as lifted instead of smudged. */
    --shadow: 0 1px 2px rgb(2 6 23 / 4%), 0 1px 3px rgb(2 6 23 / 6%);
    --shadow-lifted: 0 2px 4px rgb(2 6 23 / 5%), 0 6px 16px rgb(2 6 23 / 8%);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --fast: 160ms;
    --slow: 240ms;
}

[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0b1220;
        --surface: #121a2a;
        --surface-muted: #18233a;
        --border: #253044;
        --border-strong: #35435c;
        --text: #e8eef7;
        --text-muted: #9aa8bd;
        --accent: #38bdf8;
        --accent-hover: #7dd3fc;
        --accent-contrast: #06121f;
        --accent-soft: #10263a;
        --accent-border: #1e4d69;
        --danger: #fda29b;
        --danger-soft: #2a1512;
        --success: #6ee7a8;
        --success-soft: #0e2118;
        --warning: #fbbf70;
        --warning-soft: #241a0d;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%);
        --shadow-lifted: 0 2px 6px rgb(0 0 0 / 45%), 0 10px 24px rgb(0 0 0 / 35%);

        --status-running: #34d399;
        --status-waiting: #fbbf24;
        --status-idle: #94a3b8;
        --status-paused: #6b7787;
        --status-failed: #fda29b;
    }
}

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

code {
    font-family: var(--mono);
    font-size: 0.875em;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
}

/* ---------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    padding: 20px 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 36px 40px 64px;
    max-width: 1100px;
}

.brand {
    display: flex;
    align-items: center;
    padding: 0 8px;
    text-decoration: none;
    color: var(--text);
}

.brand__logo {
    display: block;
    width: 158px;
    height: auto;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-weight: 700;
}

.brand__name { font-weight: 650; letter-spacing: -0.01em; }

.brand--auth { margin-bottom: 32px; }
.brand--auth .brand__logo { width: 176px; }

@media (prefers-color-scheme: dark) {
    .brand__logo { filter: brightness(0) invert(1); }
}

/* ------------------------------------------------------------- switcher */

.switcher {
    padding: 10px 12px;
    background: var(--surface-muted);
    border-radius: var(--radius);
}

.switcher__current { display: flex; flex-direction: column; }
.switcher__name { font-weight: 600; font-size: 14px; }
.switcher__role { font-size: 12px; color: var(--text-muted); }
.switcher__form { margin-top: 8px; }
.switcher select { width: 100%; }

/* ------------------------------------------------------------------ nav */

.nav { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; }

.nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 14px;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.nav__item:hover { background: var(--surface-muted); color: var(--text); }

.nav__item--current {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* A marker on the edge as well as a tint, so where you are survives a colour-blind reading. */
.nav__item--current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    transform: translateY(-50%);
}

.nav__icon { display: inline-flex; width: 16px; justify-content: center; opacity: 0.9; }
.nav__icon .icon { width: 16px; height: 16px; }
.nav__label { flex: 1 1 auto; }

.sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.sidebar__link {
    display: block;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
}

.sidebar__link:hover { background: var(--surface-muted); color: var(--text); }

.sidebar__link--button {
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* ----------------------------------------------------------------- page */

.page__header { margin-bottom: 28px; }

.page__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.page__icon { color: var(--text-muted); }
.page__subtitle { margin: 0; color: var(--text-muted); max-width: 72ch; }

/* The small line above a page title that says which part of the product you are in. */
.page__eyebrow {
    margin: 0 0 4px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

/*
  A figure card. The label is ordered above the value whichever way round the markup writes them,
  so pages that predate this rule read the same as pages that came after it.
*/
.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* A hairline in the figure's own colour, rather than a tinted card: the number stays loudest. */
.stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--border-strong);
}

.stat--good::before { background: var(--status-running); }
.stat--warn::before { background: var(--status-waiting); }
.stat--danger::before { background: var(--danger); }
.stat--warn { border-color: color-mix(in srgb, var(--status-waiting) 40%, var(--border)); }

.stat__label {
    order: 1;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stat__value {
    order: 2;
    font-size: 34px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.stat__value--text { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.stat__value small { font-size: 15px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.stat__foot { order: 3; margin: 0; color: var(--text-muted); font-size: 12.5px; }

/* A run of statuses as one bar. Segments grow by count, so an empty status takes no width. */
.occupancy {
    order: 3;
    display: flex;
    gap: 2px;
    height: 6px;
    margin: 2px 0 1px;
    border-radius: 999px;
    background: var(--surface-muted);
    overflow: hidden;
}

.occupancy__seg { flex: 0 0 0; border-radius: 999px; }
.occupancy__seg[data-status="running"] { background: var(--status-running); }
.occupancy__seg[data-status="waiting"] { background: var(--status-waiting); }
.occupancy__seg[data-status="idle"] { background: var(--status-idle); }
.occupancy__seg[data-status="paused"] { background: var(--status-paused); }

.panel {
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel--muted { background: var(--surface-muted); box-shadow: none; }
.panel__title { margin: 0 0 14px; font-size: 16px; }
.panel p { margin: 0; color: var(--text-muted); max-width: 62ch; }

.empty { color: var(--text-muted); }

.notice { background: var(--surface-muted); color: var(--text); }

.scopes { margin: 0; padding-left: 18px; font-size: 14px; }
.scopes li { margin-bottom: 8px; }
.scopes .tag { margin-left: 6px; }

/*
  One piece of work, as a row. The left edge carries its state so a list of twenty can be read
  down the margin without stopping at each one.
*/
.tasks { display: flex; flex-direction: column; gap: 10px; }

.task {
    padding: 15px 18px 15px 19px;
    border-left: 3px solid var(--border-strong);
}

.task[data-tone="warn"] { border-left-color: var(--status-waiting); }
.task[data-tone="busy"] { border-left-color: var(--accent); }
.task[data-tone="good"] { border-left-color: var(--status-running); }
.task[data-tone="quiet"] { border-left-color: var(--border-strong); opacity: 0.78; }

.task__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.task__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.task__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.task__body { margin: 10px 0 0 !important; font-size: 14px; }
.task__outcome { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-muted); font-size: 13px; }
.task__outcome strong { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.task .card__actions { margin-top: 14px; padding-top: 0; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.main--wide { max-width: 1600px; width: 100%; padding: 28px 32px 32px; }

.inbox-page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.inbox-page__header .page__title { margin-bottom: 4px; }
.inbox-page__header .page__subtitle { margin: 0; }

.inbox-page__eyebrow {
    margin-bottom: 5px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.inbox-page__summary { display: flex; align-items: center; gap: 20px; color: var(--text-muted); font-size: 13px; }
.inbox-page__summary strong { color: var(--text); font-size: 15px; }

.inbox-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(480px, 1fr) 250px;
    min-height: 620px;
    height: calc(100vh - 176px);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lifted);
}

.inbox-list,
.inbox-details,
.inbox-conversation { min-width: 0; min-height: 0; }

.inbox-list { display: flex; flex-direction: column; border-right: 1px solid var(--border); }

.inbox-list__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 14px;
}

.inbox-list__top h2,
.inbox-conversation__header h2,
.inbox-details h2 { margin: 0; font-size: 15px; }

.inbox-list__top > div > span { color: var(--text-muted); font-size: 12px; }

.inbox-live { display: inline-flex; align-items: center; gap: 6px; color: var(--success); font-size: 11px; font-weight: 700; }
.inbox-live > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--success-soft); }
.inbox-live[data-state="offline"] { color: var(--danger); }
.inbox-live[data-state="reconnecting"] { color: var(--warning); }

.inbox-list__controls { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 14px 14px; border-bottom: 1px solid var(--border); }
.inbox-list__controls label { margin: 0; }
.inbox-list__controls input,
.inbox-list__controls select { height: 38px; background: var(--surface-muted); border-color: transparent; font-size: 12.5px; }
.inbox-list__controls select { padding-block: 6px; }

.inbox-search { position: relative; display: block; }
.inbox-search input { padding-left: 36px; }
.inbox-search__icon { position: absolute; left: 11px; top: 9px; width: 18px; height: 18px; color: var(--text-muted); z-index: 1; }

.inbox-list__items { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }

.inbox-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.inbox-item + .inbox-item { margin-top: 2px; }
.inbox-item:hover { background: var(--surface-muted); }
.inbox-item--current { border-color: var(--accent-border); background: var(--accent-soft); }
.inbox-item--current:hover { background: var(--accent-soft); }
.inbox-item__content { min-width: 0; }
.inbox-item__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-item__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.inbox-item__row time { flex: 0 0 auto; color: var(--text-muted); font-size: 10.5px; }
.inbox-item__preview { display: block; margin: 3px 0 7px; overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item__meta { justify-content: flex-start; }
.inbox-list__none { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.inbox-list__more { flex: 0 0 auto; margin: 0 12px 12px; }

.inbox-avatar,
.message-avatar {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.inbox-avatar img,
.message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.inbox-avatar--large { width: 46px; height: 46px; font-size: 13px; }
.inbox-avatar--xl { width: 72px; height: 72px; font-size: 18px; }
.message-avatar { width: 28px; height: 28px; font-size: 9px; margin-top: 20px; }
.inbox-avatar--fallback { background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); }

.channel-pill,
.conversation-status,
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.channel-pill { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; }
.channel-pill--facebook { color: #60a5fa; border-color: color-mix(in srgb, #60a5fa 35%, transparent); }
.channel-pill--instagram { color: #f472b6; border-color: color-mix(in srgb, #f472b6 35%, transparent); }
.channel-pill--telegram { color: #38bdf8; border-color: color-mix(in srgb, #38bdf8 35%, transparent); }
.status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.status-dot--open::before { background: var(--warning); }
.status-dot--pending::before { background: var(--accent); }
.status-dot--closed::before { background: var(--success); }

.inbox-conversation { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--bg); }
.inbox-conversation[aria-busy="true"] { cursor: progress; }
.inbox-conversation[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 20%, transparent); pointer-events: none; }

.inbox-conversation__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 78px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.inbox-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inbox-person h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.inbox-person p { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; color: var(--text-muted); font-size: 11.5px; }
.conversation-status { padding: 6px 9px; border-radius: 999px; background: var(--surface-muted); }
.conversation-status--open { color: var(--warning); background: var(--warning-soft); }
.conversation-status--pending { color: var(--accent); background: var(--accent-soft); }
.conversation-status--closed { color: var(--success); background: var(--success-soft); }

.inbox-agent-progress {
    padding: 10px 18px 11px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
}
.inbox-agent-progress__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.inbox-agent-progress__top > div { display: grid; gap: 2px; min-width: 0; }
.inbox-agent-progress__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.inbox-agent-progress__pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.inbox-agent-progress[data-state="pending"] .inbox-agent-progress__pulse,
.inbox-agent-progress[data-state="running"] .inbox-agent-progress__pulse,
.inbox-agent-progress[data-state="waiting"] .inbox-agent-progress__pulse { animation: inbox-agent-pulse 1.8s ease-out infinite; }
.inbox-agent-progress__summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.inbox-agent-progress__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 10.5px; }
.inbox-agent-progress__internal { flex: none; padding: 3px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 9px; }
.inbox-agent-progress__steps { display: flex; gap: 6px; margin: 8px 0 0; padding: 0 0 2px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.inbox-agent-progress__steps li { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); background: var(--surface); font-size: 9.5px; }
.inbox-agent-progress__steps li > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.inbox-agent-progress__steps li[data-status="completed"] > span:first-child { background: var(--success); }
.inbox-agent-progress__steps li[data-status="running"] > span:first-child,
.inbox-agent-progress__steps li[data-status="waiting"] > span:first-child { background: var(--accent); }
.inbox-agent-progress__steps li[data-status="failed"] > span:first-child { background: var(--danger); }
.inbox-agent-progress__steps small { color: inherit; font-size: 8.5px; text-transform: uppercase; }
.inbox-agent-progress__activity { display: inline-block; margin-top: 5px; color: var(--accent); font-size: 9.5px; text-decoration: none; }
.inbox-agent-progress__activity:hover { text-decoration: underline; }
@keyframes inbox-agent-pulse {
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .inbox-agent-progress__pulse { animation: none !important; }
}

.inbox-messages { min-height: 0; overflow-y: auto; padding: 24px clamp(18px, 4vw, 48px); scroll-behavior: smooth; }
.inbox-messages__older { display: block; margin: 0 auto 18px; }
.inbox-date-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: var(--text-muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.inbox-date-divider::before,
.inbox-date-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.message-row { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px; }
.message-row--outbound { justify-content: flex-end; }
.message { max-width: min(72%, 620px); }
.message__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; color: var(--text-muted); font-size: 10.5px; }
.message__meta strong { color: var(--text); font-size: 11px; }
.message-row--outbound .message__meta { justify-content: flex-end; }
.message__bubble { padding: 10px 13px; border: 1px solid var(--border); border-radius: 4px 13px 13px 13px; background: var(--surface); box-shadow: var(--shadow); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.message-row--outbound .message__bubble { border-color: var(--accent); border-radius: 13px 4px 13px 13px; background: var(--accent); color: var(--accent-contrast); }
.message__delivery { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; text-align: right; }
.message-row[data-status="sending"] .message__bubble { opacity: 0.78; }
.message-row[data-status="failed"] .message__bubble { border-color: var(--danger); }
.message-row[data-status="failed"] .message__delivery { color: var(--danger); }
.message__image { display: block; max-width: 320px; margin-top: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.message__image img { display: block; width: 100%; height: auto; }
.message__attachment { display: inline-flex; margin-top: 7px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12px; text-decoration: none; }

.inbox-composer { padding: 12px 18px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.inbox-composer > label { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 10.5px; font-weight: 600; }
.inbox-composer__field { display: flex; align-items: flex-end; gap: 10px; }
.inbox-composer textarea { min-height: 48px; max-height: 140px; resize: vertical; background: var(--surface-muted); border-color: transparent; }
.inbox-composer__send { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 94px; height: 48px; }
.inbox-composer__send .icon { width: 17px; height: 17px; }
.inbox-composer > p { margin: 5px 0 0; color: var(--text-muted); font-size: 10px; }
.inbox-composer__notice { margin-top: 7px; color: var(--text-muted); font-size: 11px; }
.inbox-composer__notice[data-kind="success"] { color: var(--success); }
.inbox-composer__notice[data-kind="error"] { color: var(--danger); }
.inbox-composer[aria-busy="true"] textarea,
.inbox-composer[aria-busy="true"] button { opacity: 0.72; }

.inbox-details { overflow-y: auto; padding: 20px; border-left: 1px solid var(--border); }
.inbox-details__person { display: flex; flex-direction: column; align-items: center; padding: 26px 0 22px; text-align: center; }
.inbox-details__person strong { margin-top: 10px; font-size: 14px; }
.inbox-details__person > span:last-child { color: var(--text-muted); font-size: 11.5px; }
.inbox-details__list { margin: 0; }
.inbox-details__list > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 11.5px; }
.inbox-details__list dt { color: var(--text-muted); }
.inbox-details__list dd { margin: 0; text-align: right; }
.profile-note { margin-top: 18px; padding: 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.inbox-conversation__empty { margin: auto; padding: 32px; color: var(--text-muted); text-align: center; }

.inbox-empty { max-width: 620px; margin: 80px auto; padding: 50px; border: 1px dashed var(--border-strong); border-radius: 16px; background: var(--surface); text-align: center; }
.inbox-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.inbox-empty h2 { margin: 0 0 8px; font-size: 20px; }
.inbox-empty p { max-width: 50ch; margin: 0 auto 22px; color: var(--text-muted); }

@media (max-width: 1250px) {
    .inbox-workspace { grid-template-columns: minmax(290px, 330px) minmax(0, 1fr); }
    .inbox-details { display: none; }
}

@media (max-width: 900px) {
    .main--wide { padding: 24px 20px 40px; }
    .inbox-page__header { align-items: flex-start; flex-direction: column; }
    .inbox-workspace { grid-template-columns: 1fr; height: auto; min-height: 0; overflow: visible; }
    .inbox-list { max-height: 340px; border-right: 0; border-bottom: 1px solid var(--border); }
    .inbox-list__items { min-height: 180px; }
    .inbox-conversation { min-height: 620px; }
}

@media (max-width: 560px) {
    .main--wide { padding-inline: 14px; }
    .inbox-page__summary { align-items: flex-start; flex-wrap: wrap; gap: 10px 16px; }
    .inbox-workspace { border-radius: 10px; }
    .inbox-conversation__header { align-items: flex-start; }
    .conversation-status { display: none; }
    .inbox-messages { padding-inline: 14px; }
    .message { max-width: 86%; }
    .inbox-composer__field { align-items: stretch; flex-direction: column; }
    .inbox-composer__send { align-self: flex-end; height: 42px; }
}

.grant {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.grant .choice { border: 0; padding: 0; }
.grant .choice:hover { background: none; }
.grant__detail { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 0 0 30px; }

/*
  An approval is a decision, so the page is built around the two buttons. Everything above them
  exists to answer "what am I agreeing to?" and nothing else competes for the eye.
*/
.approvals { display: flex; flex-direction: column; gap: 14px; }

.approval { border-left: 3px solid var(--status-waiting); }

.approval__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.approval .panel__title { margin: 0 0 3px; }
.approval__who { margin: 0 !important; font-size: 13px; }
.approval__who strong { color: var(--text); }

.approval__summary {
    margin: 0 0 16px !important;
    padding: 12px 14px;
    max-width: none !important;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text) !important;
    font-size: 13.5px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.approval .spec { margin-bottom: 16px; }
.approval__decide { display: flex; flex-direction: column; gap: 12px; }
.approval__decide .field { max-width: 460px; }

/*
  A table can always be wider than the column it sits in, so it scrolls inside its own box rather
  than pushing the page sideways. Wrap one in .table-scroll and it stays honest on a phone.
*/
.table-scroll { margin: 0 -4px; overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0 14px 9px 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-muted); }
.table th:last-child, .table td:last-child { padding-right: 0; }

/* Figures line up on the right so a column of them can be compared by eye. */
.table [data-numeric] { text-align: right; }

.table code {
    background: none;
    padding: 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.table time { color: var(--text-muted); white-space: nowrap; }

.page__header--split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.panel + .panel { margin-top: 16px; }
.panel__lead { margin: -6px 0 16px; font-size: 14px; }

.notice {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    font-size: 14px;
}

.notice--problem {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

/* ----------------------------------------------------- shared components */

/*
  An empty page is the first thing a new customer sees, so it gets a proper answer rather than a
  greyed-out box: what this is for, and the one button that ends the emptiness.
*/
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 32px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 19px;
}

.empty-state__icon .icon { width: 22px; height: 22px; }
.empty-state h2, .empty-state h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.empty-state p { max-width: 56ch; margin: 0; color: var(--text-muted); font-size: 14px; }
.empty-state__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }

/* A bar of controls above a list or a canvas. */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.toolbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
}

.segmented__button {
    appearance: none;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

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

/* Filled rather than raised: a light pill on a muted track disappears in dark mode, where the
   panel surface is darker than the track it sits in. */
.segmented__button.is-current,
.segmented__button.is-current:hover {
    background: var(--accent);
    color: var(--accent-contrast);
    box-shadow: var(--shadow);
}

.chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.chip:hover { color: var(--text); border-color: var(--border-strong); }

.chip.is-current {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
}

/*
  What an agent actually said, turn by turn. These classes were being written by the run page with
  no rules behind them, so a transcript arrived as an unbroken wall of text.
*/
.transcript { display: flex; flex-direction: column; gap: 10px; }

.turn {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.turn__who {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.turn__body {
    min-width: 0;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.turn--user { border-left-color: var(--accent); }
.turn--assistant { border-left-color: var(--status-running); }
.turn--tool { border-left-color: var(--status-waiting); background: var(--surface-muted); }
.turn--tool .turn__body, .turn--system .turn__body { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); }
.turn--system { border-left-color: var(--border-strong); }

@media (max-width: 620px) {
    .turn { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Machine-readable arguments, kept from stretching a table into the next county. */
.json {
    max-width: 40ch;
    max-height: 8.5em;
    margin: 0;
    overflow: auto;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A panel whose point is one fact and the way to act on it. */
.next-run {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.next-run__copy { min-width: 0; }
.next-run .panel__title { margin-bottom: 4px; }

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

.group { margin-bottom: 30px; }

.group__title {
    margin: 0 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

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

.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lifted); }

.card--highlight { border-color: var(--accent); }

/*
  A card carrying something's own colour on its edge rather than across its whole face. The rail
  matches the carpet that thing has on the company floor, so a department is recognisable before
  its name is read.
*/
.card--railed { position: relative; padding-left: 20px; overflow: hidden; }

.card--railed::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--room, var(--accent));
}

.card__head { display: flex; align-items: flex-start; gap: 12px; }

.card__glyph {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: #fff;
    font-size: 16px;
}

.card__glyph--avatar { background: var(--accent); font-weight: 650; }

/* Tinted rather than filled: a full-strength swatch next to a title shouts over it. */
.card__glyph--tinted {
    border: 1px solid color-mix(in srgb, var(--room, var(--accent)) 35%, transparent);
    background: color-mix(in srgb, var(--room, var(--accent)) 14%, transparent);
    color: var(--room, var(--accent));
}

.card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    font-size: 15px;
}

.card__meta { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.card__tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card__body { margin: 0; font-size: 14px; color: var(--text-muted); }

.card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

.tag--accent { color: var(--accent); border-color: var(--accent); }

/*
  A tag with a tone rather than a tag with a colour: pages say what a thing means and the palette
  decides how that looks, so a "failed" run and a rejected approval never drift apart.
*/
.tag[data-tone] { border-color: color-mix(in srgb, currentColor 40%, transparent); }
.tag[data-tone="good"] { color: var(--status-running); }
.tag[data-tone="busy"] { color: var(--accent); }
.tag[data-tone="warn"] { color: var(--status-waiting); }
.tag[data-tone="bad"] { color: var(--danger); }
.tag[data-tone="quiet"] { color: var(--text-muted); }

/* The same tones with a dot, for lists where the word alone is easy to skim past. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
}

.pill[data-tone="good"] { color: var(--status-running); }
.pill[data-tone="busy"] { color: var(--accent); }
.pill[data-tone="warn"] { color: var(--status-waiting); }
.pill[data-tone="bad"] { color: var(--danger); }
.pill[data-tone="quiet"] { color: var(--text-muted); }

/* Something needing a person pulses; nothing else on a page is allowed to. */
.pill[data-tone="warn"]::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-waiting) 22%, transparent); }

.pill__count {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
}

.spec { display: flex; gap: 22px; margin: 0; font-size: 13px; }
.spec dt { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.spec dd { margin: 2px 0 0; }

/* ----------------------------------------------------- forms, continued */

.form--wide { max-width: 780px; }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.form__actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

textarea { resize: vertical; font-family: inherit; line-height: 1.5; }

.button--quiet {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.button--quiet:hover { background: var(--surface-muted); }

.button--danger {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
}

.button--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

select:disabled, input:disabled { opacity: 0.6; cursor: not-allowed; }

/* ----------------------------------------------------------------- auth */

.auth-body { background: var(--surface); }

.auth { display: flex; min-height: 100vh; }

.auth__panel {
    flex: 0 0 clamp(340px, 42%, 520px);
    padding: 48px clamp(28px, 5vw, 72px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth__aside {
    flex: 1 1 auto;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 48px clamp(32px, 6vw, 96px);
    background: var(--accent-soft);
}

@media (min-width: 900px) {
    .auth__aside { display: flex; }
}

.auth__aside h2 { margin: 0; font-size: 26px; letter-spacing: -0.02em; max-width: 18ch; }
.auth__aside p { margin: 0; color: var(--text-muted); max-width: 46ch; }

.auth__points {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 46ch;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.auth__points li {
    position: relative;
    padding-left: 26px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* A drawn tick rather than a character, so it is the same shape on every platform. */
.auth__points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 11px;
    height: 6px;
    border: 2px solid var(--accent);
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg);
}

.auth__title { margin: 0 0 6px; font-size: 24px; letter-spacing: -0.02em; }
.auth__subtitle { margin: 0 0 26px; color: var(--text-muted); }
.auth__alt { margin-top: 22px; font-size: 14px; color: var(--text-muted); }

.auth__legal {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------------------------------------------------------- public/legal */

.public-body {
    min-height: 100vh;
    background: var(--surface-muted);
}

.public-header,
.public-footer {
    width: min(100% - 40px, 980px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-header {
    min-height: 82px;
    border-bottom: 1px solid var(--border);
}

.public-header .brand { padding: 0; }

.legal {
    width: min(100% - 40px, 820px);
    margin: 64px auto 80px;
}

.legal__hero {
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
}

.legal__eyebrow {
    margin: 0 0 12px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.legal__hero h1 {
    margin: 0;
    font-size: clamp(36px, 7vw, 58px);
    line-height: 1;
    letter-spacing: -.045em;
}

.legal__updated {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.legal__intro {
    max-width: 65ch;
    margin: 28px 0 0;
    font-size: 18px;
    line-height: 1.65;
}

.legal__document {
    display: grid;
    gap: 38px;
    padding-top: 42px;
}

.legal__document section { max-width: 72ch; }

.legal__document h2 {
    margin: 0 0 12px;
    font-size: 20px;
    letter-spacing: -.02em;
}

.legal__document p,
.legal__document li {
    line-height: 1.75;
    color: var(--text-muted);
}

.legal__document p { margin: 0 0 12px; }
.legal__document ul,
.legal__document ol { margin: 0; padding-left: 24px; }
.legal__document li + li { margin-top: 8px; }

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

.public-footer {
    min-height: 86px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}

.public-footer nav { display: flex; gap: 18px; }

@media (max-width: 560px) {
    .public-header,
    .public-footer,
    .legal { width: min(100% - 28px, 820px); }

    .legal { margin-top: 42px; }
    .public-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 10px; }
}

/* ---------------------------------------------------------------- forms */

.form { display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field--inline { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.field__label { font-size: 13px; font-weight: 600; }
.field__hint { font-size: 12px; color: var(--text-muted); }
.field__error { font-size: 12px; color: var(--danger); }

input[type="text"], input[type="email"], input[type="password"], select, textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.button--primary { background: var(--accent); color: var(--accent-contrast); }
.button--primary:hover { filter: brightness(1.08); }

/* -------------------------------------------------------------- choices */

.choices { display: flex; flex-direction: column; gap: 8px; }

.choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.choice:hover { background: var(--surface-muted); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { width: auto; margin: 0; }

.choice__glyph {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #fff;
}

.choices--compact { margin-bottom: 18px; }
.choices--compact .choice { padding: 9px 12px; align-items: flex-start; }
.choices--compact .choice input { margin-top: 3px; }

.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.choice__description { font-size: 13px; color: var(--text-muted); }

.form__errors:not(:empty) {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: 14px;
}

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

/* ASP.NET includes a hidden placeholder list even when the summary has no errors. */
.form__errors.validation-summary-valid { display: none; }

/* Workflow runs: one step per row, in the order they actually happened. */

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.step {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.step--current { border-left-color: var(--accent); background: var(--accent-soft); }

.step__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step__id { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; font-weight: 600; }
.step__title { margin: 6px 0 0; font-size: 14px; }
.step__error { margin: 6px 0 0; font-size: 14px; color: var(--danger); }

.step__output {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-muted);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow: auto;
}

/* The definition editor. Monospace because it is the thing that runs, not prose about it. */
textarea.code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* The company floor and its directory live in company.css, loaded by that page alone. */

/* Draws the eye without shouting: what is waiting on a person sits above everything else. */
.panel--attention { border-left: 3px solid var(--accent); margin-bottom: 24px; }
.panel--attention p { color: var(--text); }

/*
  One line, above everything, for the only thing on a page that cannot wait. It is a link because
  the whole strip should be clickable: being told what is blocked is useless without the way to it.
*/
.attention {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--status-waiting) 35%, var(--border));
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--warning-soft);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    transition: background var(--fast) var(--ease);
}

.attention:hover { background: color-mix(in srgb, var(--status-waiting) 12%, var(--surface)); }
.attention strong { font-weight: 700; }

.attention__dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--status-waiting);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-waiting) 20%, transparent);
}

.attention__go {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--warning);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* ------------------------------------------------------------ integrations */

.connectors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
    gap: 16px;
    align-items: stretch;
}

.connector {
    display: flex;
    flex-direction: column;
    padding: 22px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* A connected provider reads as settled rather than as another thing to do. */
.connector--live { border-left: 3px solid #3f8f4a; }

.connector__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }

.connector__glyph {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
}

.connector__glyph .icon { width: 20px; height: 20px; }

.connector__identity { flex: 1 1 auto; min-width: 0; }
.connector__name { margin: 0 0 2px; font-size: 17px; letter-spacing: -0.01em; }
.connector__summary { margin: 0; font-size: 14px; color: var(--text-muted); max-width: 62ch; }

.connector__state {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.connector__state--on {
    border-color: color-mix(in srgb, #3f8f4a 45%, transparent);
    background: color-mix(in srgb, #3f8f4a 12%, transparent);
    color: #3f8f4a;
}

.accounts { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.account {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}

.account__identity { display: flex; flex-direction: column; min-width: 0; }
.account__name { font-weight: 600; font-size: 14px; }
.account__meta { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }

.account__status { font-size: 12px; margin-left: auto; }
.account__status--connected { color: #3f8f4a; }
.account__status--needsattention { color: #b4700f; }
.account__status--revoked { color: var(--danger); }

/* One connection can expose several pages, each with its own answer to what the platform may do
   with the messages that arrive on it. They sit inside the connection so it is never ambiguous
   which account a switch belongs to. */
.page-settings {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.page-settings__identity { display: flex; align-items: baseline; gap: 8px; }
.page-settings__name { font-weight: 600; font-size: 13px; }
.page-settings__where { font-size: 12px; color: var(--text-muted); }

.page-settings .button { align-self: flex-start; }

.switch { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

.switch input {
    margin: 2px 0 0;
    width: 16px;
    height: 16px;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

.switch__label { font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.switch__label small { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

.permissions {
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
}

.permissions__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.permissions__summary::-webkit-details-marker { display: none; }
.permissions__summary::before { content: "▸"; color: var(--text-muted); }
.permissions[open] .permissions__summary::before { content: "▾"; }

.permissions__count {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.permissions__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.permission { display: flex; flex-direction: column; gap: 1px; }
.permission__name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.permission__detail { font-size: 13px; color: var(--text-muted); }

.tag--write {
    border-color: color-mix(in srgb, #b4700f 45%, transparent);
    background: color-mix(in srgb, #b4700f 14%, transparent);
    color: #b4700f;
}

.permissions__note { margin: 12px 0 0; font-size: 13px; color: var(--text-muted); }

.connect { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin-top: auto; }
.connect__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.connect__note { font-size: 13px; color: var(--text-muted); }

.connect-unavailable {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: auto;
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
}

.connect-unavailable__dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--warning);
}

.button--danger-quiet { color: var(--danger); }
.button--danger-quiet:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.choices--accounts { list-style: none; margin: 0 0 20px; padding: 0; }

/* =====================================================================
   Polish pass.

   Everything below refines what the components above already establish:
   how things respond to a pointer, how they answer a keyboard, and how
   they behave on a narrow screen. Kept in one block so the rules that
   apply to everything are read together rather than hunted for.
   ===================================================================== */

/* ---------------------------------------------------------- typography */

h1, h2, h3 { font-weight: 650; letter-spacing: -0.018em; }

.page__title { font-size: 27px; }
.page__subtitle { max-width: 68ch; font-size: 14.5px; }

/* Numbers line up in columns when they are tabular. */
.stat__value, .table td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- interactivity */

button, [role="button"], summary, label.choice, .nav__item, a { cursor: pointer; }
button:disabled, .button[disabled] { cursor: not-allowed; }

.button {
    transition:
        background-color var(--fast) var(--ease),
        border-color var(--fast) var(--ease),
        color var(--fast) var(--ease),
        box-shadow var(--fast) var(--ease);
}

.button--primary { background: var(--accent); border-color: var(--accent); }
.button--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }

/*
  Restated here on purpose. The base .button rule is declared further down the file than its own
  modifiers, and its `border` shorthand resets the border-colour they set — which left every quiet
  button rendering as bare text with nothing to say it could be pressed.
*/
.button--quiet { border-color: var(--border); }
.button--quiet:hover:not(:disabled) { border-color: var(--border-strong); }

/* Destructive actions stay quiet until reached for, then show their edge. */
.button--danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

.button:disabled { opacity: 0.55; }

/* One visible answer to the keyboard, everywhere, rather than the browser's default outline
   landing differently on every control. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

.card, .connector, .panel, .stat {
    transition: box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease);
}

.card:hover, .connector:hover { box-shadow: var(--shadow-lifted); }

.nav__item { transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease); }

.thread, .account, .step { transition: background-color var(--fast) var(--ease); }

/* --------------------------------------------------------------- forms */

input, select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: var(--text-muted);
}

/* A field that failed validation says so before the form is sent again. */
input:user-invalid, textarea:user-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field__label { font-size: 13px; font-weight: 600; }
.field__hint { font-size: 12.5px; color: var(--text-muted); }
.field__error { font-size: 12.5px; color: var(--danger); }

.form__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------------- notices */

.notice {
    padding: 12px 14px;
    margin-bottom: 20px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-secondary, var(--text));
    font-size: 14px;
}

.notice--problem {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: var(--danger-soft);
    color: var(--danger);
}

.notice--good {
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    background: var(--success-soft);
    color: var(--success);
}

.notice--warning {
    border-color: color-mix(in srgb, var(--warning) 45%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
}

/* ---------------------------------------------------------------- tags */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.tag--accent {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent);
}

/* --------------------------------------------------------------- icons */

.icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.page__icon .icon { width: 22px; height: 22px; }
.nav__icon { display: inline-flex; width: 18px; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 1024px) {
    .main { padding: 28px 24px 56px; }
}

@media (max-width: 860px) {
    /* The sidebar becomes a strip across the top rather than eating half a phone. */
    .shell { flex-direction: column; }

    .sidebar {
        width: 100%;
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .nav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
    .nav::-webkit-scrollbar { display: none; }
    .nav__item { white-space: nowrap; }
    .sidebar__footer { flex-direction: row; justify-content: space-between; }

    .main { padding: 22px 18px 48px; }
    .page__title { font-size: 23px; }
    .connector__head {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: start;
    }
    .connector__state { order: initial; grid-column: 3; grid-row: 1; }
}

@media (max-width: 520px) {
    .connector__head { grid-template-columns: 40px minmax(0, 1fr); }
    .connector__state { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 8px; }
}

/* Wide content scrolls inside itself; the page itself never does. */
.table-scroll { overflow-x: auto; }
html, body { overflow-x: hidden; }

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   Layout pass.

   The components were fine on their own and wrong together: a settings
   form ran as one narrow column down the left of a wide screen, prose
   capped at 62ch left panels two-thirds empty, and a row of five fields
   wrapped three-then-two with a ragged edge. What follows is about where
   things sit rather than what they look like.
   ===================================================================== */

.main { max-width: 1440px; }

/* Sections breathe evenly, so a page reads as a sequence rather than a pile. */
.panel + .panel,
.panel + .group,
.group + .panel,
.group + .group,
.stats + .panel,
.connectors + .group { margin-top: 22px; }

.panel { padding: 24px 26px; }

/*
  Prose stays readable at 68ch, but only prose. The old rule capped every
  paragraph inside a panel, which is why a two-line explanation left a panel
  looking broken rather than merely short.
*/
.panel p { max-width: 68ch; }
.panel__lead { max-width: 68ch; }

/*
  Forms fill the panel they sit in and pair their fields up, instead of running
  as one column with the rest of the width unused. Below 720px they stack,
  because two columns of inputs on a phone is worse than one.
*/
.form--wide { max-width: none; }

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

/* A field that needs the whole width says so rather than being left to chance. */
.form--grid .field--full,
.form--grid .form__actions,
.form--grid > fieldset { grid-column: 1 / -1; }

.field-row {
    /*
      Three across at most. Without the 30% floor a wide panel fits four, so a row of five
      fields breaks 4 + 1 and leaves a stranded input under three others; capped, it breaks
      3 + 2 and both rows read as rows.
    */
    grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 100%), 1fr));
    gap: 0 20px;
}

@media (max-width: 720px) {
    .form--grid, .field-row { grid-template-columns: 1fr; }
}

/* Actions sit on a rule, so it is obvious where a form ends. */
.form__actions {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.panel .form__actions:last-child { padding-bottom: 0; }

/* Cards keep their proportions in a wide grid instead of stretching to fill. */
.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.card { padding: 20px; }
.card__title { margin: 0; font-size: 15.5px; }
.card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.card__actions { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.card__glyph {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: #fff;
}

/* --------------------------------------------------------- agent roster */

.agent-stats { margin-bottom: 26px; }

/*
  The wardrobe an agent wears on the company floor, exposed as a token any avatar can pick up.
  One person is then the same colour in the room, in the floor directory and in this roster.
*/
[data-avatar="manager"] { --avatar: #24384f; }
[data-avatar="analyst"] { --avatar: #3b4a5f; }
[data-avatar="support"] { --avatar: #0f6f7a; }
[data-avatar="sales"] { --avatar: #7c3049; }
[data-avatar="marketing"] { --avatar: #5b4b9c; }
[data-avatar="engineer"] { --avatar: #39424f; }
[data-avatar="researcher"] { --avatar: #2f6b4b; }
[data-avatar="writer"] { --avatar: #8a5a2b; }

.agent-list { display: flex; flex-direction: column; gap: 10px; }

.agent-row {
    display: grid;
    grid-template-columns: minmax(250px, 1.35fr) minmax(220px, 0.9fr) auto;
    align-items: center;
    gap: 24px;
    min-height: 94px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow var(--slow) var(--ease), border-color var(--slow) var(--ease);
}

.agent-row:hover { box-shadow: var(--shadow-lifted); }
.agent-row--main { border-left: 3px solid var(--accent); }

.agent-row__identity { display: flex; align-items: center; gap: 14px; min-width: 0; }

.agent-row__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--avatar, var(--accent));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.agent-row__copy { min-width: 0; }
.agent-row__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; font-size: 15.5px; }
.agent-row__role { margin: 0; color: var(--text-muted); font-size: 13px; }

.agent-row__spec {
    display: grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    gap: 16px;
    margin: 0;
}

.agent-row__spec div { min-width: 0; }
.agent-row__spec dt { margin-bottom: 3px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.045em; }
.agent-row__spec dd { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.agent-row__end { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.agent-row__actions { display: flex; align-items: center; gap: 8px; }

.agent-status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.agent-status > span { width: 7px; height: 7px; border-radius: 999px; background: var(--text-muted); }
.agent-status--active > span { background: var(--success); }
.agent-status--paused > span, .agent-status--disabled > span { background: var(--warning); }

@media (max-width: 1050px) {
    .agent-row { grid-template-columns: minmax(230px, 1fr) auto; }
    .agent-row__spec { grid-column: 1 / -1; grid-row: 2; padding-left: 58px; }
}

@media (max-width: 680px) {
    .agent-row { grid-template-columns: 1fr; gap: 16px; }
    .agent-row__spec { grid-column: auto; grid-row: auto; padding-left: 0; }
    .agent-row__end { justify-content: space-between; flex-wrap: wrap; }
}

/* Group headings read as section labels rather than as more headings. */
.group__title {
    font-size: 12px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 12px;
}

/* Tables get room and stop being the widest thing on a phone. */
.table { table-layout: auto; }
.table th { padding-bottom: 10px; }
.table td { padding: 11px 14px 11px 0; vertical-align: middle; }
.table tbody tr { transition: background-color var(--fast) var(--ease); }
.table tbody tr:hover { background: var(--surface-muted); }

/* Empty states stop looking like an error. */
.panel--muted { border-style: dashed; }
.panel--muted .panel__title { color: var(--text); }

/* A checkbox list where the box lines up with the first line of its label. */
.choice { align-items: flex-start; }
.choice input { margin-top: 3px; }
/* Simple automation navigation -------------------------------------------------
   Kept flat and high-contrast: one assistant entry, one short product nav, and
   no decorative movement competing with the company floor or automation canvas. */
.sidebar__assistant {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: .7rem;
    align-items: center;
    margin: .75rem .75rem 1rem;
    padding: .8rem;
    color: #18181b;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: .75rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 180ms cubic-bezier(.23, 1, .32, 1), transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 180ms ease;
}

.sidebar__assistant strong,
.sidebar__assistant small { display: block; }
.sidebar__assistant strong { font-size: .78rem; line-height: 1.25; }
.sidebar__assistant small { margin-top: .12rem; color: #52525b; font-size: .68rem; }
.sidebar__assistant .nav__icon { color: #be185d; }
.sidebar__assistant:active { transform: scale(.97); }
.sidebar__assistant:focus-visible { outline: 3px solid rgba(236, 72, 153, .28); outline-offset: 2px; }

.card__glyph .icon { width: 1.15rem; height: 1.15rem; }

@media (hover: hover) and (pointer: fine) {
    .sidebar__assistant:hover { border-color: #a1a1aa; background: #fafafa; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar__assistant { transition: color 150ms ease, background-color 150ms ease; }
    .sidebar__assistant:active { transform: none; }
}

.automation-create-choices {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(180px, 1fr));
    gap: 1px;
    margin-bottom: 28px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--border);
}

.automation-create-choices > div,
.automation-create-choices > a {
    padding: 20px;
    background: var(--surface);
}

.automation-create-choices h2 { margin: 4px 0 0; font-size: 18px; }

.automation-create-choices > a {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 4px 10px;
    color: var(--text);
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.automation-create-choices > a > span { grid-row: span 2; color: #db2777; }
.automation-create-choices > a small { color: var(--text-muted); line-height: 1.45; }

@media (hover: hover) and (pointer: fine) {
    .automation-create-choices > a:hover { background: #fafafa; }
}

@media (max-width: 980px) {
    .automation-create-choices { grid-template-columns: 1fr; }
}