/* ActionStudio v0.7.1 — Funnels read-paths styles
 *
 * Conventions: zero border-radius, system-font stack, 0.5px borders,
 * CSS variables only, no !important. Scoped under #as-app to match the rest.
 */

/* v0.9.95: the .as-ask-strip (Align → Shift → Keep orientation band) was
   removed along with the Relationships/Activities/Follow-Through labels. The
   tabs read Capture · Nurture · Sustain now and carry the flow on their own. */

/* Sustain status chip (Apollo enroll/fail signal — "is it working"). */
#as-app .as-nurture-chip {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 1px 5px; text-transform: uppercase; letter-spacing: .3px;
}
#as-app .as-nurture-chip.as-nurture-ok      { background: color-mix(in srgb, var(--gn) 16%, var(--bg)); color: var(--gn); }
#as-app .as-nurture-chip.as-nurture-bad     { background: color-mix(in srgb, var(--rd) 16%, var(--bg)); color: var(--rd); }
#as-app .as-nurture-chip.as-nurture-neutral { background: var(--sa); color: var(--t3); }

/* ── Overview strip (item #7, v0.10.37) ──────────────────────────────
 * Was a blocky always-expanded 5-cell card below the board; now a compact
 * single line, relocated above the board (see admin-app.php). */
#as-app .as-funnels-overview {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px; padding: 8px 12px; font-size: 12px;
    background: var(--s); border: 1px solid var(--b);
}
#as-app .as-funnels-ov-item { color: var(--t2); white-space: nowrap; }
#as-app .as-funnels-ov-item b { color: var(--t1); font-weight: 700; }
#as-app .as-funnels-ov-item.is-warn b { color: var(--rd); }
#as-app .as-funnels-ov-sep { color: var(--t3); }
#as-app .as-funnels-ov-archive {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ac);
    background: none; border: none; cursor: pointer; padding: 2px 0;
}
#as-app .as-funnels-ov-archive:hover { text-decoration: underline; }

/* ── Funnel cards (list view) ──────────────────────────────────────── */
#as-app .as-funnels-card {
    background: var(--s); border: 1px solid var(--b);
    margin-bottom: 12px; cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}
#as-app .as-funnels-card:hover {
    border-color: var(--ac);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
#as-app .as-funnels-card-head {
    padding: 13px 16px; border-bottom: 1px solid var(--b);
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
}
#as-app .as-funnels-card-title {
    font-size: 15px; font-weight: 700; color: var(--t1);
}
#as-app .as-funnels-card-meta {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 4px;
}
#as-app .as-funnels-pill {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 2px 7px; background: var(--sa); color: var(--t2);
    text-transform: uppercase; letter-spacing: .4px;
}
#as-app .as-funnels-pill.is-locked {
    background: color-mix(in srgb, var(--am) 16%, var(--bg));
    color: var(--am);
}
#as-app .as-funnels-card-stats {
    display: flex; gap: 18px; align-items: center;
}
#as-app .as-funnels-stat {
    display: flex; flex-direction: column; gap: 1px;
    text-align: center; min-width: 60px;
}
#as-app .as-funnels-stat.is-warn .as-funnels-stat-val { color: var(--rd); }
#as-app .as-funnels-stat-val { font-size: 16px; font-weight: 700; color: var(--t1); }
#as-app .as-funnels-stat-lbl {
    font-size: 9px; text-transform: uppercase; letter-spacing: .4px;
    color: var(--t3);
}
#as-app .as-funnels-card-body { padding: 12px 16px; }

/* v0.7.4: archived funnel card variant — visually demoted, no hover lift,
 * inline restore/delete-now actions. Cursor: default since clicking the
 * card body doesn't navigate. */
#as-app .as-funnels-card.is-archived {
    cursor: default;
    opacity: .75;
    border-style: dashed;
}
#as-app .as-funnels-card.is-archived:hover {
    border-color: var(--b);
    box-shadow: none;
}
#as-app .as-funnels-arch-actions {
    display: flex; gap: 8px; padding: 10px 16px;
    border-top: 1px solid var(--b);
    background: color-mix(in srgb, var(--rd) 3%, var(--s));
}

/* v0.7.5: Connections panel rows in the funnel edit drawer */
#as-app .as-funnels-conn-list {
    border: 1px solid var(--b);
    background: var(--s);
}
#as-app .as-funnels-conn-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--b);
    font-size: 12px;
}
#as-app .as-funnels-conn-row:last-child { border-bottom: none; }
#as-app .as-funnels-conn-dot {
    width: 8px; height: 8px; flex: 0 0 8px;
}
#as-app .as-funnels-conn-name {
    font-weight: 600; color: var(--t1);
    flex: 0 0 110px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#as-app .as-funnels-conn-meta {
    color: var(--t3); font-size: 11px; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* v0.7.5: Connection examples (Configure → Advanced → API access) */
#as-app .as-conn-examples {
    border: 1px solid var(--b);
    background: var(--s);
    margin-top: 4px;
}
#as-app .as-conn-tabs {
    display: flex;
    border-bottom: 1px solid var(--b);
}
#as-app .as-conn-tab {
    padding: 8px 14px;
    font-size: 11px; font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    text-transform: uppercase; letter-spacing: .4px;
    border-right: 1px solid var(--b);
}
#as-app .as-conn-tab:hover { color: var(--t2); }
#as-app .as-conn-tab.on {
    color: var(--t1);
    background: var(--bg);
    border-bottom: 2px solid var(--ac);
    margin-bottom: -1px;
}
#as-app .as-conn-code {
    margin: 0;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.55;
    color: var(--t1);
    background: var(--bg);
    overflow-x: auto;
    white-space: pre;
}

/* Stage ladder (mini-viz on funnel cards) */
#as-app .as-funnels-ladder {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap;
}
#as-app .as-funnels-rung {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; background: var(--bg);
    border: 1px solid var(--b); font-size: 11px;
}
#as-app .as-funnels-rung-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
#as-app .as-funnels-rung-lbl { color: var(--t2); }
#as-app .as-funnels-rung-cnt { color: var(--t1); font-weight: 700; }
#as-app .as-funnels-rung-arr { color: var(--t3); font-size: 11px; }

/* ── Source attribution (item #8, v0.10.37) ──────────────────────────
 * Relocated above the board (see admin-app.php); labels now resolved
 * (asResolveSourceLabel) instead of raw source_key, each row gets a
 * color (cycled inline per-row, no longer a single hardcoded fill). */
#as-app .as-funnels-srccard { margin-bottom: 12px; }
#as-app .as-funnels-srcgrid {
    display: flex; flex-direction: column; gap: 6px;
}
#as-app .as-funnels-srcrow {
    display: grid; grid-template-columns: 130px 1fr 130px;
    align-items: center; gap: 10px; font-size: 12px;
}
#as-app .as-funnels-srclbl {
    color: var(--t1); font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#as-app .as-funnels-srcdot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
}
#as-app .as-funnels-srcbar {
    height: 8px; background: var(--sa); border: 1px solid var(--b);
    overflow: hidden;
}
#as-app .as-funnels-srcfill {
    height: 100%;
    transition: width .25s;
}
#as-app .as-funnels-srccount { color: var(--t3); font-size: 11px; text-align: right; }

/* ── Detail view ───────────────────────────────────────────────────── */
#as-app .as-funnels-detail-head {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0 14px; border-bottom: 1px solid var(--sa);
    margin-bottom: 14px;
}

/* Conversion strip */
#as-app .as-funnels-convstrip {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; margin-bottom: 14px;
    background: var(--s); border: 1px solid var(--b);
    flex-wrap: wrap;
}
#as-app .as-funnels-convstep {
    display: flex; align-items: center; gap: 6px; font-size: 11px;
}
#as-app .as-funnels-convdot {
    width: 8px; height: 8px; border-radius: 50%;
}
#as-app .as-funnels-convlbl { color: var(--t2); font-weight: 600; }
#as-app .as-funnels-convcnt {
    color: var(--t1); font-weight: 700;
    background: var(--bg); padding: 2px 6px; border: 1px solid var(--sa);
}
#as-app .as-funnels-convarrow { color: var(--t3); font-size: 12px; padding: 0 4px; }
#as-app .as-funnels-convtotal {
    margin-left: auto; font-weight: 700; color: var(--gn); font-size: 12px;
}

/* Sub-tabs (Active/Stalled/All) */
#as-app .as-funnels-subtabs {
    display: flex; align-items: center;
    border-bottom: 1px solid var(--b);
    margin-bottom: 14px;
}
#as-app .as-funnels-subtab {
    padding: 8px 14px; font-size: 12px; font-weight: 600;
    color: var(--t3); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .12s;
}
#as-app .as-funnels-subtab:hover { color: var(--t1); }
#as-app .as-funnels-subtab.on {
    color: var(--ac); border-bottom-color: var(--ac);
}
#as-app .as-funnels-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 6px; margin-left: 5px;
    background: var(--sa); color: var(--t2);
}
#as-app .as-funnels-subtab.on .as-funnels-badge {
    background: color-mix(in srgb, var(--ac) 18%, var(--bg));
    color: var(--ac);
}
#as-app .as-funnels-badge.is-warn {
    background: color-mix(in srgb, var(--rd) 18%, var(--bg));
    color: var(--rd);
}

/* Kanban */
#as-app .as-funnels-kbhead {
    padding: 10px 12px; border-bottom: 2px solid var(--b);
    background: var(--s);
}
#as-app .as-funnels-kbbody {
    padding: 8px; min-height: 120px; background: var(--bg);
}

/* Entry cards in kanban */
#as-app .as-funnels-entry {
    background: var(--s); border: 1px solid var(--b);
    padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
    transition: box-shadow .12s, transform .08s;
}
#as-app .as-funnels-entry:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
#as-app .as-funnels-entry-name {
    font-size: 12px; font-weight: 700; color: var(--t1);
    line-height: 1.3;
}
#as-app .as-funnels-entry-co {
    font-size: 10px; color: var(--t3); margin-top: 2px;
}
#as-app .as-funnels-stalled-chip {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 1px 5px; background: color-mix(in srgb, var(--rd) 16%, var(--bg));
    color: var(--rd); margin-left: auto;
}

/* List */
#as-app .as-funnels-table {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
}
#as-app .as-funnels-table th {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--b);
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--t3);
    background: var(--s);
}
#as-app .as-funnels-table td {
    padding: 10px 12px; border-bottom: 1px solid var(--sa);
    color: var(--t1);
}
#as-app .as-funnels-table tbody tr:hover {
    background: var(--s);
}

/* ── Entry tray ────────────────────────────────────────────────────── */
#as-app .as-funnels-tray-section {
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--sa);
}
#as-app .as-funnels-tray-section:last-child { border-bottom: none; }
#as-app .as-funnels-tray-lbl {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--t3); margin-bottom: 6px;
}

#as-app .as-funnels-stalled-callout {
    padding: 10px 12px; margin-bottom: 14px;
    background: color-mix(in srgb, var(--rd) 8%, var(--bg));
    border-left: 3px solid var(--rd);
}

#as-app .as-funnels-evt {
    display: flex; gap: 12px; align-items: center;
    padding: 6px 0;
}
#as-app .as-funnels-evt-amt {
    font-size: 13px; font-weight: 700; color: var(--gn);
    min-width: 70px;
}
#as-app .as-funnels-evt-meta {
    flex: 1; font-size: 11px; color: var(--t2);
}

#as-app .as-funnels-hist-row {
    display: flex; align-items: center;
    padding: 5px 0;
}

/* Mobile */
@media (max-width: 720px) {
    #as-app .as-funnels-card-head { flex-direction: column; align-items: flex-start; }
    #as-app .as-funnels-card-stats { flex-wrap: wrap; gap: 12px; }
    #as-app .as-funnels-srcrow { grid-template-columns: 80px 1fr 90px; }
    #as-app .as-funnels-table th:nth-child(2),
    #as-app .as-funnels-table td:nth-child(2),
    #as-app .as-funnels-table th:nth-child(6),
    #as-app .as-funnels-table td:nth-child(6) { display: none; }
}


/* v0.7.2: funnel-source chip on Pipeline cards.
 * Visually mirrors .as-opp-seg-chip but with arrow icon and pointer
 * cursor (clickable to jump to the funnel entry). */
#as-app .as-opp-funnel-chip {
    display:inline-flex; align-items:center;
    font-size:10px; padding:2px 7px; margin-top:4px; margin-left:4px;
    background:var(--sa); border:1px solid var(--b); color:var(--ac);
    font-weight:600; cursor:pointer; transition:background 120ms;
    max-width:100%;
}
#as-app .as-opp-funnel-chip:hover { background:var(--ac); color:var(--inv, #fff); }

/* v0.10.37 item #2: edit-funnel tray drill-down menu. Rows reuse
 * as-google-wizard.css's .as-g-scope-row/.as-g-scope-icon/.as-g-scope-body/
 * .as-g-scope-title/.as-g-scope-desc verbatim (same icon+title+description
 * row shape, already app-wide) — only the trailing chevron and the
 * section/back-button chrome are new here. */
#as-app .as-editfnl-chevron { flex: 0 0 auto; color: var(--t3); }
#as-app .as-editfnl-section { padding-top: 2px; }
#as-app .as-editfnl-back {
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 12px; font-weight: 600; color: var(--ac); margin-bottom: 10px;
}
#as-app .as-editfnl-back:hover { text-decoration: underline; }
#as-app .as-editfnl-section-title {
    font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 12px;
}

/* v0.7.2: edit-funnel tray — stage rows. */
#as-app .as-funnels-edit-stage {
    display:flex; align-items:flex-start; gap:8px;
    padding:8px 10px; margin-bottom:6px;
    background:var(--s); border:1px solid var(--b);
    cursor:grab;
}
#as-app .as-funnels-edit-stage:active { cursor:grabbing; }
#as-app .as-funnels-edit-stage.as-edit-drop-over {
    border-color:var(--ac); background:var(--sa);
}
#as-app .as-funnels-edit-stage-handle {
    color:var(--t3); font-size:14px; padding-top:6px; user-select:none;
    cursor:grab;
}
#as-app .as-edit-stage-label { padding:5px 8px; font-size:12px; }
#as-app .as-edit-stage-color { width:32px; height:28px; padding:0; border:1px solid var(--b); cursor:pointer; }
#as-app .as-edit-stage-value,
#as-app .as-edit-stage-stale { padding:3px 6px; font-size:11px; }


/* ════════════════════════════════════════════════════════════════════
   v0.7.08: Conversion view + goals rings strip + bound segment dropdown
   ════════════════════════════════════════════════════════════════════ */

/* ── Goals rings strip (above subtabs, when goals set) ── */
#as-app .as-funnels-goalstrip {
    display:flex; gap:14px; align-items:center;
    padding:12px 16px; background:var(--s);
    border:1px solid var(--b); border-radius:6px;
    margin:0 0 12px;
}
#as-app .as-funnels-ring-cell {
    display:flex; align-items:center; gap:10px;
    padding:0 14px; border-right:1px solid var(--b);
}
#as-app .as-funnels-ring-cell:first-child { padding-left:0; }
#as-app .as-funnels-ring-cell:last-of-type { border-right:0; }
#as-app .as-funnels-ring { width:36px; height:36px; flex:0 0 36px; }
#as-app .as-funnels-ring-meta { display:flex; flex-direction:column; line-height:1.3; }
#as-app .as-funnels-ring-lbl {
    font-size:10px; color:var(--t3); text-transform:uppercase;
    letter-spacing:.04em; font-weight:600;
}
#as-app .as-funnels-ring-val { font-size:13px; font-weight:600; color:var(--t1); }
#as-app .as-funnels-ring-val .of { color:var(--t3); font-weight:400; font-size:12px; }
#as-app .as-funnels-ring-pct { font-size:11px; color:var(--t2); }
#as-app .as-funnels-ring-pct.is-over  { color:var(--gn); font-weight:600; }
#as-app .as-funnels-ring-pct.is-under { color:var(--rd); }
#as-app .as-funnels-goalstrip-window {
    margin-left:auto; font-size:11px; color:var(--t3);
}

/* ── Conversion bars view ── */
#as-app .as-funnels-cbar-wrap { padding:4px 2px 0; }
#as-app .as-funnels-cbar-grid {
    display:flex; flex-direction:column; gap:10px;
    padding:6px 4px;
}
#as-app .as-funnels-cbar-row {
    display:grid; grid-template-columns:170px 1fr 90px;
    align-items:center; gap:14px;
}
#as-app .as-funnels-cbar-label {
    font-size:12px; font-weight:600; color:var(--t1);
}
#as-app .as-funnels-cbar-star { color:var(--ac); }
#as-app .as-funnels-cbar-sub {
    font-size:10px; color:var(--t3); text-transform:uppercase;
    letter-spacing:.04em; font-weight:500; margin-top:2px;
}
#as-app .as-funnels-cbar-track {
    height:30px; background:var(--sa); border-radius:4px;
    position:relative; overflow:hidden;
}
#as-app .as-funnels-cbar-fill {
    height:100%; border-radius:4px;
    display:flex; align-items:center; padding-left:10px;
    color:#fff; font-size:11px; font-weight:600;
    transition:width .3s ease;
    position:relative; z-index:2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#as-app .as-funnels-cbar-fill.is-over { background:var(--gn) !important; }
#as-app .as-funnels-cbar-goalline {
    position:absolute; top:-2px; bottom:-2px; width:2px;
    background:var(--t1); z-index:3;
}
#as-app .as-funnels-cbar-goalline::after {
    content:'goal'; position:absolute; top:-14px; left:4px;
    font-size:9px; color:var(--t1); text-transform:uppercase;
    letter-spacing:.04em; font-weight:600; white-space:nowrap;
}
#as-app .as-funnels-cbar-drop {
    font-size:11px; font-weight:500; text-align:right;
}
#as-app .as-funnels-cbar-drop.is-drop { color:var(--rd); }
#as-app .as-funnels-cbar-drop.is-zero { color:var(--t3); }

#as-app .as-funnels-cbar-legend {
    margin-top:14px; padding-top:12px;
    border-top:1px solid var(--b);
    display:flex; gap:20px; flex-wrap:wrap; align-items:center;
    font-size:11px; color:var(--t2);
}
#as-app .as-funnels-cbar-legend .sw {
    display:inline-block; width:12px; height:12px;
    border-radius:2px; margin-right:6px; vertical-align:-2px;
}
#as-app .as-funnels-cbar-legend .goalmark {
    display:inline-block; width:2px; height:14px;
    background:var(--t1); margin-right:6px; vertical-align:-3px;
}
#as-app .as-funnels-cbar-legend .drop-note {
    color:var(--rd); margin-left:auto;
}
#as-app .as-funnels-cbar-empty-goal {
    margin-top:12px; padding:10px 12px;
    background:var(--sa); border-left:3px solid var(--ac);
    border-radius:0 4px 4px 0;
    font-size:11px; color:var(--t2);
}

/* ── Goals fields in edit tray ── */
#as-app #as-edit-funnel-goal-count,
#as-app #as-edit-funnel-goal-revenue,
#as-app #as-edit-funnel-goal-window {
    width:100%; box-sizing:border-box;
}


/* ════════════════════════════════════════════════════════════════════
   v0.7.08 Pass 3: Sankey view
   ════════════════════════════════════════════════════════════════════ */
#as-app .as-funnels-sankey-wrap {
    padding:6px 2px 0;
    width:100%;
    overflow-x:auto;
}
#as-app .as-funnels-sankey-svg {
    display:block;
    min-width:880px;
    width:100%;
    height:auto;
}
#as-app .as-funnels-sankey-label {
    fill:var(--t1);
    font-size:12px;
    font-weight:600;
}
#as-app .as-funnels-sankey-count {
    fill:var(--t2);
    font-size:11px;
}
#as-app .as-funnels-sankey-star {
    fill:var(--ac);
    font-size:11px;
    font-weight:600;
}
#as-app .as-funnels-sankey-flow {
    fill:var(--ac);
    opacity:.55;
    transition:opacity .15s ease;
    cursor:default;
}
#as-app .as-funnels-sankey-flow:hover { opacity:.85; }
#as-app .as-funnels-sankey-drop {
    fill:var(--rd);
    opacity:.35;
    cursor:default;
}
#as-app .as-funnels-sankey-drop:hover { opacity:.55; }

#as-app .as-funnels-sankey-legend {
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--b);
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    align-items:center;
    font-size:11px;
    color:var(--t2);
}
#as-app .as-funnels-sankey-legend .sw {
    display:inline-block;
    width:14px;
    height:10px;
    margin-right:6px;
    vertical-align:-1px;
    border-radius:2px;
}
#as-app .as-funnels-sankey-legend .sw.flow {
    background:var(--ac);
    opacity:.55;
}
#as-app .as-funnels-sankey-legend .sw.drop {
    background:var(--rd);
    opacity:.35;
}
#as-app .as-funnels-sankey-legend .hint {
    color:var(--t3);
    margin-left:auto;
}


/* ════════════════════════════════════════════════════════════════════
   v0.7.08 Pass 4: Funnels kanban — Pipeline parity + goal pill
   ════════════════════════════════════════════════════════════════════ */
#as-app .as-funnels-kb-goal-pill {
    display:inline-block;
    margin-left:auto;
    padding:2px 8px;
    background:var(--acl);
    color:var(--ac);
    border-radius:10px;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}
#as-app .as-funnels-kb-goal-pill.is-over {
    background:var(--gnl);
    color:var(--gn);
}

/* ════════════════════════════════════════════════════════════════════
   v0.7.08 Pass 5: Headline-strip lifetime cell + relocated filter
   ════════════════════════════════════════════════════════════════════ */

/* Lifetime cell mirrors ring-cell layout but with no SVG ring (text-only).
 * Padding-left matches ring-cell start to keep alignment clean. */
#as-app .as-funnels-lifetime-cell {
    padding-left:14px;
}
#as-app .as-funnels-lifetime-cell:first-child {
    padding-left:0;
}
#as-app .as-funnels-lifetime-cell .as-funnels-ring-meta {
    line-height:1.3;
}

/* Subtabs row — two segmented controls side by side */
#as-app .as-funnels-subtabs-row {
    display:flex;
    gap:12px;
    align-items:center;
    margin:0 0 14px;
    flex-wrap:wrap;
}
#as-app .as-funnels-filter-toggle .as-opp-view-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
}
#as-app .as-funnels-filter-toggle .as-funnels-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:16px;
    padding:0 5px;
    border-radius:8px;
    background:var(--b);
    color:var(--t2);
    font-size:10px;
    font-weight:600;
    line-height:1;
}
#as-app .as-funnels-filter-toggle .as-opp-view-btn.on .as-funnels-badge {
    background:rgba(255,255,255,0.25);
    color:#fff;
}
#as-app .as-funnels-filter-toggle .as-funnels-badge.is-warn {
    background:var(--rdl);
    color:var(--rd);
}
#as-app .as-funnels-filter-toggle .as-opp-view-btn.on .as-funnels-badge.is-warn {
    background:rgba(255,255,255,0.3);
    color:#fff;
}

/* ─── v0.7.11 F1: automation visibility ───────────────────────────── */

/* Live / Manual-only pill variants — extends existing .as-funnels-pill.
 * Reuses the team's --gn (green) for live, --sa (subtle) for manual. */
#as-app .as-funnels-pill.is-live {
    background: color-mix(in srgb, var(--gn) 14%, var(--bg));
    color: var(--gn);
}
#as-app .as-funnels-pill.is-manual {
    background: var(--sa);
    color: var(--t3);
}

/* Index card automation footer — sits beneath the stage ladder. */
#as-app .as-funnels-card-auto {
    padding: 8px 16px 12px;
    font-size: 11px;
    color: var(--t3);
    border-top: 1px dashed var(--b);
    margin-top: 8px;
}
#as-app .as-funnels-card-auto.is-manual {
    color: var(--t3);
    opacity: 0.7;
}

/* Detail header "Automated by" row — sits below the title strip. */
#as-app .as-funnels-detail-auto {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 16px;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--b);
}
#as-app .as-funnels-detail-auto-lbl {
    font-size: 10px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-right: 4px;
}

/* Source pill — used in detail-auto row and tray-conns panel.
 * Inline-flex with leading status dot. */
#as-app .as-funnels-srcpill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    background: var(--sa);
    color: var(--t2);
    border-radius: 999px;
    white-space: nowrap;
}
#as-app .as-funnels-srcpill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--t3);
    flex-shrink: 0;
}
#as-app .as-funnels-srcpill.is-active::before   { background: var(--gn); }
#as-app .as-funnels-srcpill.is-idle::before     { background: var(--am); }
#as-app .as-funnels-srcpill.is-inactive::before { background: var(--t3); }

/* Add Entry tray Connections panel — info surface between
 * Source select and the existing "Entry lands at..." info box. */
#as-app .as-funnels-tray-conns {
    margin: 14px 0 8px;
    padding: 10px 12px;
    background: var(--s);
    border: 1px solid var(--b);
    border-radius: 4px;
}
#as-app .as-funnels-tray-conns.is-empty {
    border-style: dashed;
    opacity: 0.85;
}
#as-app .as-funnels-tray-conns-head {
    font-size: 11px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
}
#as-app .as-funnels-tray-conns-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
#as-app .as-funnels-tray-conns-hint {
    font-size: 10px;
    color: var(--t3);
    line-height: 1.5;
}

/* v0.8.01: Source Mapping panel in edit tray ─────────────────────────
 * Renders under the Connections panel. Each row pairs a source_key
 * (read-only code) with an editable label, an active toggle, save,
 * and delete. Mirrors the existing connection-row idiom for visual
 * continuity but adds the inline form controls. */
#as-app .as-funnels-mapping-list {
    margin: 4px 0 10px;
}
#as-app .as-funnels-mapping-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--b);
    background: var(--s);
    margin-bottom: 4px;
}
#as-app .as-funnels-mapping-row.is-inactive {
    opacity: 0.55;
}
#as-app .as-funnels-mapping-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 8px;
}
#as-app .as-funnels-mapping-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
#as-app .as-funnels-mapping-key code {
    font-size: 11px;
    color: var(--t2);
    background: transparent;
    padding: 0;
}
#as-app .as-funnels-mapping-body .as-mapping-label {
    font-size: 12px;
    padding: 4px 6px;
    border: 1px solid var(--b);
    background: var(--s);
    color: var(--t1);
    width: 100%;
}
#as-app .as-funnels-mapping-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .4px;
    cursor: pointer;
}
#as-app .as-funnels-mapping-toggle input[type="checkbox"] {
    margin: 0;
}
#as-app .as-funnels-mapping-row .as-mapping-save,
#as-app .as-funnels-mapping-row .as-mapping-delete {
    font-size: 11px;
    padding: 4px 9px;
    line-height: 1;
}
#as-app .as-funnels-mapping-empty {
    padding: 10px;
    background: var(--s);
    border: 1px dashed var(--b);
    font-size: 11px;
    color: var(--t3);
    line-height: 1.6;
}
#as-app .as-funnels-mapping-add {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: stretch;
}
#as-app .as-funnels-mapping-add input[type="text"] {
    flex: 1;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--b);
    background: var(--s);
    color: var(--t1);
}
#as-app .as-funnels-mapping-add .btn {
    font-size: 11px;
    padding: 0 12px;
    white-space: nowrap;
}

/* v0.8.02: drag grip + drop indicator + rich-label hint for mapping rows. */
#as-app .as-funnels-mapping-row {
    cursor: default;
}
#as-app .as-funnels-mapping-grip {
    color: var(--t3);
    font-size: 12px;
    line-height: 1;
    padding: 0 4px;
    cursor: grab;
    user-select: none;
    flex: 0 0 auto;
}
#as-app .as-funnels-mapping-row[draggable="true"]:active .as-funnels-mapping-grip {
    cursor: grabbing;
}
#as-app .as-funnels-mapping-row.as-mapping-drop-over {
    border-top: 2px solid var(--ac);
}
#as-app .as-funnels-mapping-key {
    cursor: pointer;
}
#as-app .as-funnels-mapping-key:hover code {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
#as-app .as-funnels-mapping-key input.as-mapping-key-edit {
    font-size: 11px;
    padding: 2px 4px;
    border: 1px solid var(--b);
    background: var(--s);
    color: var(--t2);
    font-family: inherit;
    width: 100%;
}
#as-app .as-funnels-mapping-rich {
    font-size: 10px;
    color: var(--t3);
    font-style: italic;
    margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════════════
   v0.9.95 — Capture / Sustain made actionable
   ══════════════════════════════════════════════════════════════════════ */

/* ── Action cluster ────────────────────────────────────────────────────
   One row of small controls that sits next to the decision signal, so the
   operator reads "why this person, why now" and acts without leaving the
   row. Shared by the Sustain queue rows and the board cards. */
#as-app .as-ft-actions {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
#as-app .as-ft-actions button,
#as-app .as-ft-actions select {
    font-family: inherit; font-size: 10px; line-height: 1.6;
    padding: 2px 6px;
    border: 1px solid var(--b); background: var(--s); color: var(--t2);
    cursor: pointer;
}
#as-app .as-ft-actions button:hover:not(:disabled),
#as-app .as-ft-actions select:hover { border-color: var(--ac); color: var(--ac); }
#as-app .as-ft-actions button:disabled { opacity: .35; cursor: default; }
#as-app .as-ft-actions button.is-busy { opacity: .5; cursor: progress; }
#as-app .as-ft-actions select { max-width: 120px; }

/* Owner initial bubble — same read as the opportunity card's owner dot. */
#as-app .as-ft-owner {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    font-size: 9px; font-weight: 700;
    background: var(--sa); color: var(--t2);
}
#as-app .as-ft-owner.is-none { color: var(--t3); }

/* Signal cell: days-in-stage + stalled flag read together. */
#as-app .as-ft-signal { display: flex; align-items: center; gap: 5px; }
#as-app .as-ft-days { font-size: 11px; color: var(--t3); }
#as-app .as-ft-days.is-stalled { color: var(--rd); font-weight: 700; }

/* ── v0.9.97: Capture chooser is a dropdown ────────────────────────────
   The v0.9.95 card strip is gone. It took the full width above the fold and
   selecting a card pushed the campaign's board — the thing you wanted — below
   it. Picker bar on top, campaign detail directly under it. */
#as-app .as-funnels-pickbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
#as-app .as-funnels-pickbar-l { display: flex; align-items: center; gap: 8px; }
#as-app .as-funnels-pick-lbl {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--t3);
}
#as-app .as-funnels-pick-sel {
    font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 6px 10px; min-width: 280px; max-width: 460px;
    border: 1px solid var(--b); background: var(--inp-bg); color: var(--t1);
}
#as-app .as-funnels-pick-sel:hover { border-color: var(--ac); }

/* ── Campaign detail: identity + numbers, composed in the main area ──── */
#as-app .as-funnels-detailhead {
    background: var(--s); border: 1px solid var(--b);
    padding: 14px 16px; margin-bottom: 12px;
}
#as-app .as-funnels-detailhead-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}
/* v0.10.37 item #1: the funnel name IS the picker — a <select> styled at
 * title weight, replacing the old static .as-funnels-detail-title div
 * (removed, no longer referenced) and the separate toolbar dropdown. */
#as-app .as-funnels-detail-title-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px;
}
#as-app .as-funnels-title-pick {
    font-family: inherit; font-size: 17px; font-weight: 700; color: var(--t1);
    border: 0.5px solid transparent; background: transparent; padding: 2px 4px 2px 0;
    max-width: 100%; cursor: pointer;
}
#as-app .as-funnels-title-pick:hover,
#as-app .as-funnels-title-pick:focus {
    border-color: var(--b); background: var(--inp-bg);
}
#as-app .as-funnels-head-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
#as-app .as-funnels-detail-desc {
    font-size: 11px; color: var(--t3); margin-top: 6px; max-width: 60ch; line-height: 1.5;
}
#as-app .as-funnels-dstats { display: flex; gap: 20px; flex-wrap: wrap; }
#as-app .as-funnels-dstat { display: flex; flex-direction: column; gap: 1px; }
#as-app .as-funnels-dstat-val { font-size: 18px; font-weight: 700; color: var(--t1); }
#as-app .as-funnels-dstat.is-warn .as-funnels-dstat-val { color: var(--rd); }
#as-app .as-funnels-dstat-lbl {
    font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--t3);
}

/* ── Sustain status buckets ───────────────────────────────────────────
   Columns are a lens over computed status, so they carry no drop target and
   no drag affordance. The note says so out loud. */
#as-app .as-ft-lens-note {
    font-size: 11px; color: var(--t3); line-height: 1.5;
    margin-bottom: 8px; padding-left: 2px; max-width: 90ch;
}
#as-app .as-kb-col.as-ft-bucket { cursor: default; }
#as-app .as-kb-col.as-ft-bucket .as-opp-card { cursor: pointer; }

/* Board host + its header row (funnel name, sub-tab filter, full-view link). */
#as-app .as-funnels-board-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
#as-app .as-funnels-board-title { font-size: 13px; font-weight: 700; color: var(--t1); }
#as-app .as-funnels-board-sub   { font-size: 11px; color: var(--t3); }

/* ── Group-by control (Nurture board + Capture board) ──────────────────
   Sits with the filter row; disabled when the axis would yield a
   single-column board, which is not a board at all. */
#as-app .as-groupby {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--t3);
}
#as-app .as-groupby select {
    font-family: inherit; font-size: 11px; padding: 3px 6px;
    border: 1px solid var(--b); background: var(--inp-bg); color: var(--t1);
}
#as-app .as-groupby select option:disabled { color: var(--t3); }

/* Overflow column — the tail of a long-tail grouping lands here rather
   than spraying thirty one-card columns across the board. */
#as-app .as-kb-col.is-other .as-kb-header { border-bottom-style: dashed; }

/* ── New-funnel wizard (integrated-UI WS2) ─────────────────────────────────
 * v0.10.35: shell is now the app-wide modal doctrine from as-google-wizard.css
 * (.as-g-modal-backdrop/.as-g-wiz/.as-g-dots) — only step-CONTENT rules live
 * here. The step dots themselves need no funnel-specific CSS.
 * IMPORTANT: unprefixed (no "#as-app "), unlike the rest of this file — the
 * modal is appended to document.body, outside #as-app (same reason
 * as-google-wizard.css's .as-g-* shell rules are unprefixed; see the :root
 * palette-mirror comment in actionstudio.css). An #as-app-scoped selector
 * here would silently never match. */
.as-wz-chips,.as-wz-radios{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.as-wz-chip,.as-wz-radio{display:flex;text-align:left;border:1px solid var(--b);background:var(--s);padding:9px 11px;cursor:pointer;color:var(--t1)}
/* these are <label>/<button> elements inside .as-g-wiz-body — undo its
 * field-label uppercasing so option titles read as normal-case content */
.as-wz-radio,.as-wz-switch,.as-wz-chip,
.as-wz-radio-t,.as-wz-radio-d,.as-wz-chip-t,.as-wz-chip-d{text-transform:none;letter-spacing:normal;font-weight:400}
.as-wz-radio-t,.as-wz-chip-t{font-weight:600}
label.as-wz-switch{text-transform:none;letter-spacing:normal;font-size:12px;color:var(--t1)}
.as-wz-chip{flex-direction:column;gap:2px}
.as-wz-radio{gap:9px;align-items:flex-start}
.as-wz-chip.on,.as-wz-radio.on{border-color:var(--ac);background:var(--acl)}
.as-wz-chip-t,.as-wz-radio-t{font-weight:600;font-size:12px;display:block}
.as-wz-chip-d,.as-wz-radio-d{font-size:11px;color:var(--t3);display:block;margin-top:1px}
.as-wz-radio input{margin-top:2px;flex:0 0 auto}
.as-wz-switch{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;margin-top:12px;cursor:pointer}
.as-wz-note{font-size:11px;color:var(--t3);margin-top:10px;line-height:1.5;background:var(--sa);padding:8px 10px;border-left:2px solid var(--b)}

/* Stages step — inline editor (label/color/reorder/delete), pre-creation.
 * Mirrors .as-funnels-edit-stage's look (the post-creation editor) but
 * simplified — no value/stale/revenue/conversion/Apollo fields here; those
 * stay exclusive to the Edit-funnel tray after the funnel exists. */
.as-wz-stagelist{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.as-wz-stagerow{display:flex;align-items:center;gap:8px;border:1px solid var(--b);background:var(--s);padding:7px 9px}
.as-wz-stage-color{width:28px;height:28px;padding:0;border:1px solid var(--b);cursor:pointer;flex:0 0 auto}
.as-wz-stage-label{flex:1;padding:6px 8px;font-size:12px;border:1px solid var(--b);background:var(--inp-bg);color:var(--t1)}
.as-wz-stage-ord{display:flex;flex-direction:column;gap:1px;flex:0 0 auto}
.as-wz-stage-ord button{width:18px;height:13px;display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1;color:var(--t3);border:1px solid var(--b);background:var(--s);cursor:pointer}
.as-wz-stage-ord button:hover:not(:disabled){color:var(--t1)}
.as-wz-stage-ord button:disabled{opacity:.35;cursor:default}
.as-wz-stage-del{width:24px;height:24px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--t3);cursor:pointer;background:none;border:none}
.as-wz-stage-del:hover{color:var(--rd)}
.as-wz-addstage{margin-top:9px;font-size:12px;font-weight:600;color:var(--ac);background:none;border:none;cursor:pointer;padding:4px 0}
.as-wz-addstage:hover{text-decoration:underline}

.as-wz-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.as-wz-stage{border:1px solid var(--b);background:var(--s);padding:3px 8px;font-size:11px;font-weight:600}
.as-wz-arrow{color:var(--t3);font-size:11px}
.as-wz-review{border:1px solid var(--b)}
.as-wz-rrow{display:flex;border-bottom:1px solid var(--b)}
.as-wz-rrow:last-child{border-bottom:none}
.as-wz-rk{width:104px;flex:0 0 104px;padding:8px 10px;font-size:11px;color:var(--t3);background:var(--sa)}
.as-wz-rv{padding:8px 10px;font-size:12px;color:var(--t1)}
.as-wz-guard{font-size:11px;color:var(--t2);margin-top:10px;line-height:1.5;background:var(--acl);padding:9px 11px;border-left:2px solid var(--ac)}