/* ============================================
   PIPELINE — build-your-own Kanban boards
   Scope: every selector lives under .pipeline-page (or a .pipeline-* class)
   because modern.css owns the generic .kanban-* rules of the Tasks board.
   Colours come from the brand bands as --band-* tokens; the page root carries
   the board's accent (data-band on #pipeline-page) and any stage, chip or
   template re-declares data-band="<name>" to read its own var(--band).
   One band at a time: no element ever shows several bands side by side. The
   one exception is the board's columns: each carries a faint tint of its own
   stage band (neutral stages stay untinted); cards are never tinted.
   ============================================ */

.pipeline-page {
    --band-jade: #308E65;
    --band-sand: #B08D3C;
    --band-copper: #C07B42;
    --band-rust: #AD3F13;
    --band-violet: #5C468A;
    --band-steel: #4B7DAF;
    --band-neutral: #8A857A;
    --band: var(--band-neutral);
    --pipeline-column-w: 296px;
    --pipeline-radius: 14px;
    --pipeline-card-radius: 12px;
    /* Columns are translucent panes over the board canvas: modern.css's
       glass tokens (the fallbacks keep the old panes without them) */
    --pipeline-pane: var(--surface-soft, color-mix(in srgb, var(--card) 46%, transparent));
    --pipeline-pane-border: var(--surface-border, color-mix(in srgb, var(--border) 85%, transparent));
    --pipeline-pane-edge: var(--surface-edge, rgba(255, 255, 255, 0.45));
    /* Hover lift: --shadow-hover's 32px blur is cut off by the scrolling
       column body (10px padding) and dialog body, so cards lift less */
    --pipeline-lift: 0 2px 8px rgba(28, 27, 24, 0.08);
    /* A stage column's own band in its pane, plus a touch more at the head */
    --pipeline-tint: 7%;
    --pipeline-tint-head: 4%;
    position: relative;
}

[data-theme="dark"] .pipeline-page {
    --band-jade: #43A87D;
    --band-sand: #CBB577;
    --band-copper: #D0925A;
    --band-rust: #D06239;
    --band-violet: #8A72C0;
    --band-steel: #7FA6CF;
    --band-neutral: #8F8A80;
    --pipeline-pane: var(--surface-soft, color-mix(in srgb, var(--card) 58%, transparent));
    --pipeline-pane-border: var(--surface-border, rgba(255, 255, 255, 0.07));
    --pipeline-pane-edge: var(--surface-edge, rgba(255, 255, 255, 0.04));
    --pipeline-lift: 0 2px 8px rgba(0, 0, 0, 0.35);
    --pipeline-tint: 8%;
    --pipeline-tint-head: 4%;
}

.pipeline-page[data-band="jade"],    .pipeline-page [data-band="jade"]    { --band: var(--band-jade); }
.pipeline-page[data-band="sand"],    .pipeline-page [data-band="sand"]    { --band: var(--band-sand); }
.pipeline-page[data-band="copper"],  .pipeline-page [data-band="copper"]  { --band: var(--band-copper); }
.pipeline-page[data-band="rust"],    .pipeline-page [data-band="rust"]    { --band: var(--band-rust); }
.pipeline-page[data-band="violet"],  .pipeline-page [data-band="violet"]  { --band: var(--band-violet); }
.pipeline-page[data-band="steel"],   .pipeline-page [data-band="steel"]   { --band: var(--band-steel); }
.pipeline-page[data-band="neutral"], .pipeline-page [data-band="neutral"] { --band: var(--band-neutral); }

/* Class display rules (.neu-btn, .neu-form-group, menu items…) tie with the
   UA's [hidden] rule on specificity and win by order; here hidden always wins. */
.pipeline-page [hidden] {
    display: none !important;
}

/* Visually hidden live region (tailwind's .sr-only also exists; this is a
   belt-and-braces fallback for pages where the utility is purged). */
#pipeline-live,
#pc-props-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ---------- Page layout ----------
   The board view fills the content area: header, tabs row, suggestions and
   toolbar keep their natural height, the board takes what is left and every
   column scrolls inside itself. Percent heights only resolve against a
   definite height, which is why the old `max-height: calc(100vh - …)` board
   silently clipped tall columns (the column's max-height: 100% never
   applied). On phones the page scrolls instead (see the mobile block). */

.pipeline-page[data-view="board"],
.pipeline-page[data-view="loading"] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.pipeline-page[data-view="board"] > *,
.pipeline-page[data-view="loading"] > * {
    flex: 0 0 auto;
}

.pipeline-page[data-view="board"] > .pipeline-board,
.pipeline-page[data-view="loading"] > .pipeline-board {
    flex: 1 1 0;
    /* A tall suggestion list must not squeeze the board to a sliver;
       past this the page scrolls instead. 32vh, not 45vh: with two
       suggestions a 1000px viewport leaves the board 388px, so 450px
       made the content area scroll on an ordinary desktop. */
    min-height: max(260px, 32vh);
}

/* ---------- Buttons (scoped) ----------
   Flat jade primary and quiet outlines: the page's dialogs read as sheets,
   not as the gradient/glow buttons the rest of the app still uses. */

.pipeline-page .neu-btn {
    border-radius: 10px;
    box-shadow: none;
}

.pipeline-page .neu-btn-primary {
    background: var(--primary);
    border: 1px solid transparent;
    color: var(--primary-foreground);
    box-shadow: none;
}

.pipeline-page .neu-btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: none;
}

.pipeline-page .neu-btn-primary:active {
    background: var(--primary-hover);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14);
}

.pipeline-page .neu-btn-primary svg {
    filter: none;
}

.pipeline-page .neu-btn-danger:hover {
    color: #fff;
}

/* ---------- Header ---------- */

/* Title row (~38px: the switcher's height) and one 20px meta line under it,
   the last item of the header: it takes a row of its own (flex-basis 100%). */
.pipeline-header {
    margin-bottom: 0.25rem;
    align-items: center;
    gap: 2px 16px;
}

.pipeline-title-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    min-height: 38px;
}

/* The meta row takes the header's last line: the meta line (on a board
   its live figures, pipeline.js renderMeta; on the other views the
   description or a summary; one line, the full text in the title
   attribute) and, on a board, the Figures button at its end. */
.pipeline-meta-row {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pipeline-header .pipeline-meta {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: var(--fs-small, 13px);
    line-height: 20px;
    color: var(--foreground-secondary);
    font-variant-numeric: tabular-nums lining-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-meta-figure {
    border-radius: 4px;
    color: var(--foreground);
    font-weight: 600;
    text-decoration: none;
}

.pipeline-meta-figure:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.pipeline-meta-figure:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-meta-figure.is-warn {
    color: var(--band-rust);
}

.pipeline-meta-sep {
    margin: 0 6px;
    color: var(--muted-foreground);
}

.pipeline-meta-desc {
    color: var(--muted-foreground);
}

/* Figures button: a pill at the end of the meta line. Its sparkline glyph
   draws itself when the board lands and the chevron turns while the pane
   is open. Until the button is first used (pipeline:figures-seen) a halo
   in the board's colour pulses three times so the pane gets found. */
.pipeline-figures-btn {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px 0 9px;
    border: 1px solid var(--surface-border, var(--border));
    border-radius: 999px;
    background: var(--surface, var(--card));
    color: var(--foreground-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.pipeline-figures-btn:hover {
    color: var(--foreground);
    border-color: color-mix(in srgb, var(--band) 45%, var(--surface-border, var(--border)));
    background: color-mix(in srgb, var(--band) 8%, var(--surface, var(--card)));
}

.pipeline-figures-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-figures-btn[aria-expanded="true"] {
    color: var(--foreground);
    border-color: color-mix(in srgb, var(--band) 40%, transparent);
    background: color-mix(in srgb, var(--band) 12%, transparent);
}

.pipeline-figures-glyph {
    width: 18px;
    height: 11px;
    color: var(--band);
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: pipeline-figures-draw 0.9s ease-out 0.35s forwards;
}

.pipeline-figures-chev {
    width: 12px;
    height: 12px;
    transition: transform 0.18s ease;
}

.pipeline-figures-btn[aria-expanded="true"] .pipeline-figures-chev {
    transform: rotate(180deg);
}

.pipeline-figures-btn.is-new::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--band) 55%, transparent);
    animation: pipeline-figures-pulse 2.4s ease-out 1.2s 3;
}

@keyframes pipeline-figures-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes pipeline-figures-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--band) 55%, transparent);
    }
    60% {
        box-shadow: 0 0 0 9px color-mix(in srgb, var(--band) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--band) 0%, transparent);
    }
}

/* ---------- Figures pane ----------
   Under the header, above the tabs: one soft pane (the Insights totals'
   look), five figures with their second line, then the weekly flow at
   the right. The board's compact metrics: no request of its own. */
.pipeline-figures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(188px, 22vw, 236px);
    align-items: stretch;
    margin: 2px 0 8px;
    background: var(--surface-soft, var(--card));
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    animation: pipeline-figures-in 0.18s ease-out;
}

.pipeline-figures[hidden] {
    display: none;
}

.pipeline-figures-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
}

.pipeline-figures .pipeline-metric {
    padding: 9px 16px 10px;
}

.pipeline-figures .pipeline-metric-value {
    font-size: 21px;
}

.pipeline-figures-flow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 8px 16px 7px;
    border-left: 1px solid var(--surface-border, var(--border));
}

.pipeline-figures-flow-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--muted-foreground);
}

.pipeline-figures-flow .pipeline-spark {
    height: 34px;
}

.pipeline-figures-flow .pipeline-spark-legend {
    margin-top: 2px;
    font-size: 11px;
}

.pipeline-figures-flow .pipeline-muted {
    margin: 0;
    font-size: 12px;
}

@keyframes pipeline-figures-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 899px) {
    .pipeline-figures {
        grid-template-columns: minmax(0, 1fr);
    }

    .pipeline-figures-flow {
        border-left: 0;
        border-top: 1px solid var(--surface-border, var(--border));
    }
}

.pipeline-title-row .neu-page-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-board-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: var(--band);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.pipeline-page[data-view="insights"] .pipeline-board-swatch,
.pipeline-page[data-view="empty"] .pipeline-board-swatch {
    display: none;
}

.pipeline-actions {
    flex-wrap: wrap;
}

/* The title keeps ~320px (then ends in an ellipsis) before the actions wrap
   under it, so the wider switcher doesn't push them to a second row; wrapped
   or not, the actions hug the right edge. Row layout only: phones stack. */
@media (min-width: 769px) {
    .pipeline-header > div:first-child {
        flex: 1 1 320px;
    }

    .pipeline-actions {
        margin-left: auto;
        justify-content: flex-end;
    }
}

/* The switcher carries the board's colour: its swatch sits inside the
   select, which otherwise reads as the glass buttons beside it (their
   height, 10px radius, 14px/600) with the board's hue on hover and focus. */
.pipeline-switcher {
    position: relative;
    display: inline-flex;
    align-self: stretch; /* exactly the buttons' height */
    min-width: 0;
}

.pipeline-switcher::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 13px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 3px;
    background: var(--band);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    pointer-events: none;
}

/* Long names end in an ellipsis clear of the chevron. A select is as wide
   as its longest option, so the cap keeps a long name from pushing the
   actions. */
.pipeline-switcher .neu-select {
    width: auto;
    min-width: 0;
    max-width: min(360px, 42vw);
    min-height: 38px;
    padding: 0.4375rem 2.5rem 0.4375rem 1.9375rem;
    border-radius: 10px;
    border-color: var(--surface-border, var(--border));
    background-color: var(--surface, var(--card));
    background-position: right 0.875rem center;
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.pipeline-switcher .neu-select:hover {
    border-color: color-mix(in srgb, var(--band) 45%, var(--surface-border, var(--border)));
    background-color: var(--surface-strong, var(--card));
}

.pipeline-switcher .neu-select:focus {
    border-color: var(--band);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--band) 18%, transparent);
}

/* "Overview" (insights across every pipeline): the same glass as the
   switcher, its trend icon in jade, lifts on hover. */
.pipeline-insights-link {
    text-decoration: none;
    padding-left: 0.875rem;
    padding-right: 1rem;
    border-color: var(--surface-border, var(--border));
    background: var(--surface, var(--card));
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
    font-weight: 600;
}

.pipeline-insights-link .lucide,
.pipeline-insights-link svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
}

.pipeline-insights-link:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--surface-border, var(--border)));
    background: var(--surface-strong, var(--card));
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-lift, 0 2px 6px rgba(0, 0, 0, 0.05));
}

.pipeline-page[data-view="insights"] .pipeline-insights-link,
.pipeline-page[data-view="insights"] #pipeline-add-card-btn {
    display: none;
}

/* ---------- Menus ---------- */

.pipeline-menu-anchor {
    position: relative;
}

.pipeline-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    padding: 6px;
    background: var(--surface-strong, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    -webkit-backdrop-filter: blur(var(--surface-blur, 18px)) saturate(1.1);
    backdrop-filter: blur(var(--surface-blur, 18px)) saturate(1.1);
    z-index: var(--z-dropdown, 100);
}

.pipeline-menu[hidden] {
    display: none;
}

.pipeline-menu hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

.pipeline-menu [role="menuitem"],
.pipeline-menu [role="menuitemcheckbox"] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--foreground);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.pipeline-menu [role="menuitem"]:hover,
.pipeline-menu [role="menuitem"]:focus-visible,
.pipeline-menu [role="menuitemcheckbox"]:hover,
.pipeline-menu [role="menuitemcheckbox"]:focus-visible {
    background: var(--secondary);
    outline: none;
}

.pipeline-menu [role="menuitem"].is-danger {
    color: var(--danger);
}

.pipeline-menu [role="menuitem"][disabled] {
    opacity: 0.45;
    cursor: default;
}

/* "Compact cards": the label, then a check while it is on */
.pipeline-menu [role="menuitemcheckbox"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pipeline-menu-check {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--primary);
}

.pipeline-menu [aria-checked="false"] .pipeline-menu-check {
    visibility: hidden;
}

.pipeline-card-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    min-width: 168px;
}

/* ---------- Banner ---------- */

.pipeline-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.875rem;
    padding: 0.625rem 1rem;
    border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--border));
    background: var(--warning-tint);
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--foreground);
}

.pipeline-banner[hidden] {
    display: none;
}

/* In the tabs row: the archived notice is one quiet 30px line */
.pipeline-tabs-row .pipeline-banner {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    align-self: center;
    min-width: 0;
    gap: 10px;
    margin: 0;
    padding: 2px 3px 2px 12px;
    border-radius: 10px;
    font-size: 12.5px;
}

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

.pipeline-tabs-row .pipeline-banner .neu-btn {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 7px;
    font-size: 12px;
}

/* ---------- Insight totals ----------
   One soft pane, no cell dividers: the figures read as a single line of
   facts rather than boxed tiles (the all-pipelines Insights view). On a
   board the same figures are the header's meta line. */

.pipeline-insight-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 0.875rem;
    background: var(--surface-soft, var(--card));
    border: 1px solid transparent;
    border-radius: 12px;
    overflow: hidden;
}

@media (min-width: 900px) {
    .pipeline-insight-totals {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.pipeline-metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px 11px;
    min-width: 0;
}

.pipeline-metric-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--tracking-snug);
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-metric-value.is-warn {
    color: var(--danger);
}

.pipeline-metric-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--foreground-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-metric-sub {
    font-size: 11.5px;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Suggested ----------
   A one-line summary in the tabs row (#pipeline-suggestions-bar: eyebrow,
   count, the first titles, Show / Hide) over the list it opens below the
   row (#pipeline-suggestions). Both carry the copper rail. */

.pipeline-suggestions-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    align-self: center;
    min-width: 0;
    max-width: 560px;
    height: 30px;
    margin-left: auto;
    padding: 0 3px 0 11px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-left: 3px solid var(--band-copper);
    border-radius: 10px;
}

.pipeline-suggestions-bar .pipeline-suggestions-title {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pipeline-suggestions-peek {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--foreground-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-suggestions-bar .pipeline-link-btn {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 7px;
}

.pipeline-suggestions-bar .pipeline-link-btn:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    text-decoration: none;
}

.pipeline-suggestions-bar .pipeline-link-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pipeline-suggestions {
    margin: 0 0 0.5rem;
    padding: 2px 14px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-left: 3px solid var(--band-copper);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
}

.pipeline-suggestions[hidden] {
    display: none;
}

.pipeline-suggestions-title {
    margin: 0;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--foreground-secondary);
}

.pipeline-suggestions-count {
    margin-left: 4px;
    font-weight: 500;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-suggestion-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 769px) {
    /* Up to 20 rows arrive; the board keeps its room, the list scrolls */
    .pipeline-suggestion-list {
        max-height: 236px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.pipeline-suggestion-list[hidden] {
    display: none;
}

.pipeline-suggestion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "kind title actions"
        "kind reason actions";
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid var(--border-light);
}

.pipeline-suggestion:first-child {
    border-top: 0;
}

/* Quiet chip: no fill, a hairline in its own hue (plain --border first
   where color-mix() is unsupported). The kind keeps its band, in the
   band's text-safe shade: the --band fills read 2.9-4.0:1 as light text. */
.pipeline-suggestion-kind {
    grid-area: kind;
    align-self: start;
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--band-ink, var(--foreground-secondary));
    background: transparent;
    border: 1px solid var(--border);
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
}

.pipeline-suggestion-kind[data-band="jade"]   { --band-ink: #25714D; }
.pipeline-suggestion-kind[data-band="steel"]  { --band-ink: #3A6591; }
.pipeline-suggestion-kind[data-band="sand"]   { --band-ink: #766333; }
.pipeline-suggestion-kind[data-band="copper"] { --band-ink: #89572E; }
.pipeline-suggestion-kind[data-band="rust"]   { --band-ink: #8C330F; }
.pipeline-suggestion-kind[data-band="violet"] { --band-ink: #4C3975; }

[data-theme="dark"] .pipeline-suggestion-kind[data-band="jade"]   { --band-ink: #7CCBA8; }
[data-theme="dark"] .pipeline-suggestion-kind[data-band="steel"]  { --band-ink: #9DBCE0; }
[data-theme="dark"] .pipeline-suggestion-kind[data-band="sand"]   { --band-ink: #E2D2A7; }
[data-theme="dark"] .pipeline-suggestion-kind[data-band="copper"] { --band-ink: #E3AF7F; }
[data-theme="dark"] .pipeline-suggestion-kind[data-band="rust"]   { --band-ink: #E08A66; }
[data-theme="dark"] .pipeline-suggestion-kind[data-band="violet"] { --band-ink: #AC98D9; }

.pipeline-suggestion-title {
    grid-area: title;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-suggestion-reason {
    grid-area: reason;
    font-size: 12px;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

.pipeline-suggestion-reason:empty {
    display: none;
}

.pipeline-suggestion-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-suggestion-actions .pipeline-link-btn {
    margin-left: 0;
}

@media (max-width: 640px) {
    .pipeline-suggestion {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "kind title"
            "kind reason"
            "actions actions";
        row-gap: 4px;
    }

    .pipeline-suggestion-title {
        white-space: normal;
    }

    .pipeline-suggestion-actions {
        padding-top: 2px;
    }
}

/* ---------- Toolbar tweaks ----------
   One 36px row from 1100px (a 260px search, then the filters, Active /
   Archived, the count and the density button); below that the search and
   the filters take a row each, and phones keep toolbar.css's disclosure.
   Unfiltered selects name what they filter ("Stage", "Owner"…) and size to
   the picked option where field-sizing is supported (elsewhere they keep
   their widest-option width and the filters may wrap). */

.pipeline-toolbar {
    gap: 6px 10px;
    margin-bottom: 6px;
}

.pipeline-toolbar[hidden] {
    display: none;
}

.pipeline-toolbar .neu-toolbar-filters {
    gap: 6px;
}

.pipeline-toolbar .neu-search-wrapper .neu-input {
    min-height: 36px;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

@media (min-width: 769px) {
    .pipeline-toolbar .neu-toolbar-filters .neu-select {
        field-sizing: content;
        max-width: 220px;
        padding: 0.25rem 1.625rem 0.25rem 0.625rem;
        background-position: right 0.5rem center;
    }
}

/* The filters never shrink below their one-line width while the search can
   give way (260px down to 160px); only then do the filters wrap inside
   their own box, the search staying put on the first line. */
@media (min-width: 1100px) {
    .pipeline-toolbar {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .pipeline-toolbar .neu-toolbar-search {
        flex: 0 1 260px;
        min-width: 160px;
        max-width: 260px;
    }

    .pipeline-toolbar .neu-toolbar-filters {
        flex: 1 0 auto;
        min-width: 0;
        max-width: calc(100% - 170px);
    }
}

/* Comfortable / compact cards (pipeline:density): a ghost icon button,
   jade while compact, like "My cards" */
.pipeline-density-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    color: var(--foreground-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pipeline-density-btn:hover {
    border-color: var(--surface-border, var(--border));
    background-color: var(--surface-strong, var(--secondary));
    color: var(--foreground);
}

.pipeline-density-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-density-btn[aria-pressed="true"] {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.pipeline-density-btn svg {
    width: 16px;
    height: 16px;
}

.pipeline-mine-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0.25rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: color-mix(in srgb, var(--secondary) 75%, transparent);
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pipeline-mine-chip:hover {
    border-color: var(--border);
    background-color: var(--secondary);
}

.pipeline-mine-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-mine-chip[aria-pressed="true"] {
    color: var(--primary);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

.pipeline-mine-chip svg {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    /* modern.css stacks the toolbar filters one per row here */
    .pipeline-mine-chip {
        flex: 1 1 100%;
    }
}

/* ---------- Selection bar ----------
   Takes the toolbar's place while cards are selected. The filters keep their
   room underneath (hidden, out of the tab order), so nothing below moves as
   the first card is picked. Phones float it at the bottom (mobile block). */

.pipeline-toolbar.is-selecting {
    position: relative;
}

.pipeline-toolbar.is-selecting > :not(.pipeline-selection) {
    visibility: hidden;
}

.pipeline-selection {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 8px 0 14px;
    background: var(--surface-strong, var(--card));
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 12px;
    animation: pipeline-selection-in 0.16s ease-out;
}

@keyframes pipeline-selection-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.pipeline-selection-count {
    flex: 0 0 auto;
    margin-right: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.pipeline-selection .neu-btn-sm {
    gap: 6px;
    white-space: nowrap;
}

.pipeline-selection .neu-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.pipeline-selection-caret {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}

/* Clear / Stop sits at the far end */
.pipeline-selection > .pipeline-link-btn {
    margin-left: auto;
    padding: 6px 8px;
    border-radius: 8px;
}

.pipeline-selection > .pipeline-link-btn:disabled {
    opacity: 0.55;
    cursor: default;
    text-decoration: none;
}

.pipeline-selection-menu {
    left: 0;
    right: auto;
    max-height: min(320px, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pipeline-menu-note {
    margin-left: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}

/* ---------- Board ----------
   A quiet canvas washed with the board's own accent (one band, barely
   there) that the translucent columns let through. */

.pipeline-board {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 6px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-left: 6px;
    -webkit-overflow-scrolling: touch;
    min-height: 260px;
    border-radius: calc(var(--pipeline-radius) + 4px);
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--band) 9%, transparent), transparent 62%),
        radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--band) 5%, transparent), transparent 58%);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--foreground) 22%, transparent) transparent;
}

.pipeline-board[hidden] {
    display: none;
}

.pipeline-board::-webkit-scrollbar {
    height: 8px;
}

.pipeline-board::-webkit-scrollbar-track {
    background: transparent;
}

.pipeline-board::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--foreground) 22%, transparent);
    border-radius: 8px;
}

.pipeline-column {
    flex: 0 0 var(--pipeline-column-w);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-width: 0;
    background: var(--pipeline-pane);
    border: 1px solid var(--pipeline-pane-border);
    border-radius: var(--pipeline-radius);
    box-shadow: inset 0 1px 0 var(--pipeline-pane-edge);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.pipeline-column.is-over-wip {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.pipeline-column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 6px;
    min-width: 0;
}

.pipeline-swatch {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--band);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--band) 16%, transparent);
}

.pipeline-column-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-column-kind {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--band);
    opacity: 0.9;
}

.pipeline-column-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border-light);
    color: var(--foreground-secondary);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-column.is-over-wip .pipeline-column-count {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}

.pipeline-column-sum {
    padding: 0 12px 8px 28px;
    font-size: 11.5px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-column-sum:empty {
    display: none;
}

.pipeline-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 10px 10px;
    min-height: 56px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent;
}

.pipeline-column-body::-webkit-scrollbar {
    width: 6px;
}

.pipeline-column-body::-webkit-scrollbar-track {
    background: transparent;
}

.pipeline-column-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--foreground) 18%, transparent);
    border-radius: 6px;
}

.pipeline-column-body:empty::after,
.pipeline-column-body.is-empty:not(:has(.pipeline-drop-slot))::after {
    content: "No cards";
    display: block;
    padding: 14px 8px;
    border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--foreground));
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    color: var(--muted-foreground);
}

/* ---------- Folded columns ----------
   Any stage folds into a narrow rail (one button: name, count, total); won
   and lost start folded. The state is remembered per board, and the rail is
   still a drop target. */

.pipeline-column-fold {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: -4px -4px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pipeline-column-fold svg {
    width: 14px;
    height: 14px;
}

.pipeline-column-fold:hover {
    background: var(--card);
    color: var(--foreground);
}

.pipeline-column-fold:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pipeline-column.is-collapsed {
    flex: 0 0 52px;
    align-self: stretch;
    min-height: 240px;
}

.pipeline-column-rail {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 10px 0 14px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--foreground);
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.16s ease;
}

.pipeline-column-rail:hover {
    background: color-mix(in srgb, var(--band) 7%, transparent);
}

.pipeline-column-rail:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.pipeline-rail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    color: var(--muted-foreground);
    transition: background 0.15s ease, color 0.15s ease;
}

.pipeline-rail-icon svg {
    width: 14px;
    height: 14px;
}

.pipeline-column-rail:hover .pipeline-rail-icon {
    background: var(--card);
    color: var(--foreground);
}

.pipeline-column-rail .pipeline-column-count {
    padding: 1px 6px;
}

.pipeline-rail-name,
.pipeline-rail-sum {
    flex: 0 1 auto;
    min-height: 0;
    writing-mode: vertical-rl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-rail-name {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.pipeline-rail-sum {
    font-size: 11.5px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-column.is-collapsed .pipeline-column-body {
    display: none;
}

/* Filters narrowed the board and some matches sit in this folded stage */
.pipeline-column.is-collapsed.has-matches .pipeline-column-count {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
}

.pipeline-column-foot {
    padding: 0 10px 10px;
}

.pipeline-add-card {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--foreground-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pipeline-add-card:hover,
.pipeline-add-card:focus-visible {
    background: var(--card);
    color: var(--primary);
    outline: none;
}

/* Quick add: "Add card" turns into a title composer in place */
.pipeline-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    background: var(--surface-strong, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: var(--pipeline-card-radius);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 1px 2px rgba(0, 0, 0, 0.04));
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pipeline-composer:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.pipeline-composer-input {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 3px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--foreground);
}

.pipeline-composer-input::placeholder {
    color: var(--muted-foreground);
    font-weight: 400;
}

.pipeline-composer-input:focus {
    outline: none;
}

.pipeline-composer-input[readonly] {
    color: var(--muted-foreground);
}

.pipeline-composer-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pipeline-composer .neu-btn-sm {
    min-height: 28px;
    padding: 0.25rem 0.75rem;
    font-size: 12.5px;
}

.pipeline-composer .pipeline-link-btn {
    margin-left: 0;
    padding: 4px 2px;
    font-weight: 500;
    color: var(--foreground-secondary);
}

.pipeline-composer .pipeline-link-btn:hover:not(:disabled) {
    color: var(--primary);
}

.pipeline-composer .pipeline-link-btn:disabled {
    opacity: 0.5;
    cursor: default;
    text-decoration: none;
}

.pipeline-composer .pipeline-icon-btn {
    margin-left: auto;
}

.pipeline-composer .pipeline-icon-btn:hover {
    background: var(--secondary);
}

.pipeline-add-stage {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 168px;
    padding: 11px 14px;
    border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--foreground));
    border-radius: var(--pipeline-radius);
    background: transparent;
    color: var(--foreground-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pipeline-add-stage:hover,
.pipeline-add-stage:focus-visible {
    border-color: var(--primary);
    background: var(--pipeline-pane);
    color: var(--primary);
    outline: none;
}

/* ---------- Cards ---------- */

.pipeline-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 12px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: var(--pipeline-card-radius);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 1px 2px rgba(0, 0, 0, 0.04));
    cursor: grab;
    /* touch scrolls the board; touch drags start from the grip only */
    touch-action: auto;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pipeline-card:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--pipeline-lift);
    border-color: color-mix(in srgb, var(--band) 38%, var(--border));
}

.pipeline-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-card.is-dragging {
    display: none;
}

.pipeline-card.is-closed {
    opacity: 0.82;
}

.pipeline-card.is-archived {
    opacity: 0.7;
    border-style: dashed;
    cursor: default;
}

.pipeline-card-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* The card is a column flex box: keep the chip a pill, not a full-width bar */
.pipeline-card > .pipeline-chip {
    align-self: flex-start;
}

.pipeline-priority {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: transparent;
}

.pipeline-card[data-priority="high"] .pipeline-priority {
    background: var(--warning);
}

.pipeline-card[data-priority="critical"] .pipeline-priority {
    background: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.pipeline-card[data-priority="low"] .pipeline-priority,
.pipeline-card[data-priority="medium"] .pipeline-priority {
    display: none;
}

.pipeline-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.pipeline-card-menu-btn,
.pipeline-card-grip {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: -4px -6px -4px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--foreground-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.pipeline-card-grip {
    display: none;
    cursor: grab;
    touch-action: none;
}

.pipeline-card:hover .pipeline-card-menu-btn,
.pipeline-card:focus-within .pipeline-card-menu-btn,
.pipeline-card-menu-btn:focus-visible,
.pipeline-card-menu-btn[aria-expanded="true"] {
    opacity: 1;
}

.pipeline-card-menu-btn:hover {
    background: var(--secondary);
    color: var(--foreground);
}

.pipeline-card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-height: 18px;
    font-size: 11.5px;
    color: var(--foreground-secondary);
}

.pipeline-card-foot:empty {
    display: none;
}

.pipeline-card-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-card-due {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-card-due svg {
    width: 12px;
    height: 12px;
}

.pipeline-card-due.is-overdue {
    color: var(--danger);
    font-weight: 600;
}

.pipeline-card-due.is-soon {
    color: var(--warning);
    font-weight: 600;
}

/* Files on the card: same weight as the due chip, the foot's own colour */
.pipeline-card-files {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-card-files svg {
    width: 12px;
    height: 12px;
}

.pipeline-tags {
    display: inline-flex;
    gap: 4px;
    min-width: 0;
}

.pipeline-tag {
    display: inline-block;
    max-width: 96px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--secondary);
    color: var(--foreground-secondary);
    font-size: 10.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-avatar {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary);
    border: 1px solid var(--border-light);
    color: var(--foreground-secondary);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Entity chips — one brand tint per record type (dashboard.css contract) */
.pipeline-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    color: var(--chip, var(--foreground-secondary));
    background: var(--chip-tint, var(--secondary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-chip svg {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
}

.pipeline-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
}

a.pipeline-chip:hover {
    border-color: color-mix(in srgb, var(--chip, var(--primary)) 40%, transparent);
}

.pipeline-chip--contact      { --chip: #25714D; --chip-tint: rgba(48, 142, 101, 0.10); }
.pipeline-chip--organization { --chip: #3A6591; --chip-tint: rgba(75, 125, 175, 0.12); }
.pipeline-chip--project      { --chip: #766333; --chip-tint: rgba(215, 194, 138, 0.24); }
.pipeline-chip--task         { --chip: #89572E; --chip-tint: rgba(192, 123, 66, 0.14); }
.pipeline-chip--restricted   { --chip: var(--muted-foreground); --chip-tint: var(--secondary); font-style: italic; }

[data-theme="dark"] .pipeline-chip--contact      { --chip: #43A87D; --chip-tint: rgba(67, 168, 125, 0.15); }
[data-theme="dark"] .pipeline-chip--organization { --chip: #7FA6CF; --chip-tint: rgba(127, 166, 207, 0.13); }
[data-theme="dark"] .pipeline-chip--project      { --chip: #CBB577; --chip-tint: rgba(215, 194, 138, 0.12); }
[data-theme="dark"] .pipeline-chip--task         { --chip: #D0925A; --chip-tint: rgba(208, 146, 90, 0.14); }

/* ---------- Selection ----------
   The checkbox straddles the card's left edge, so showing it never moves the
   title: hidden until hover or focus, always on touch, and on every card once
   anything is selected (.has-selection on the board). */

.pipeline-card-check {
    position: absolute;
    top: 9px;
    left: -12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pipeline-card-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid color-mix(in srgb, var(--foreground) 32%, var(--card));
    border-radius: 5px;
    background: var(--card);
    color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.pipeline-card-check-box svg {
    width: 11px;
    height: 11px;
}

.pipeline-card:hover .pipeline-card-check,
.pipeline-card:focus-within .pipeline-card-check,
.pipeline-board.has-selection .pipeline-card-check,
.pipeline-card-check[aria-checked="true"] {
    opacity: 1;
}

.pipeline-card-check:hover .pipeline-card-check-box {
    border-color: var(--primary);
}

.pipeline-card-check:focus-visible {
    outline: none;
}

.pipeline-card-check:focus-visible .pipeline-card-check-box {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-card-check[aria-checked="true"] .pipeline-card-check-box {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
}

/* After :hover so the selected outline wins over the hover tint */
.pipeline-card.is-selected,
.pipeline-card.is-selected:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface, var(--card)));
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-rest, 0 1px 2px rgba(0, 0, 0, 0.04));
}

/* The keyboard's current card (j / k / h / l), focused or not */
.pipeline-card.is-current {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Compact cards ----------
   .pipeline-board[data-density="compact"] (pipeline:density); the drag
   ghost leaves the board, so it carries .is-compact. One title line, the
   linked record and the foot share the next line (the record gives way),
   tags hidden: about half a comfortable card. Same markup, same handlers. */

.pipeline-board[data-density="compact"] .pipeline-column-body {
    gap: 6px;
}

.pipeline-board[data-density="compact"] .pipeline-card,
.pipeline-card.is-compact {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    align-items: center;
    gap: 4px 8px;
    padding: 7px 10px;
}

.pipeline-board[data-density="compact"] .pipeline-card-top,
.pipeline-card.is-compact .pipeline-card-top {
    grid-column: 1 / -1;
    align-items: center;
}

/* No linked record: the foot takes the whole line */
.pipeline-board[data-density="compact"] .pipeline-card-top + .pipeline-card-foot,
.pipeline-card.is-compact .pipeline-card-top + .pipeline-card-foot {
    grid-column: 1 / -1;
}

.pipeline-board[data-density="compact"] .pipeline-card > .pipeline-chip,
.pipeline-card.is-compact > .pipeline-chip {
    align-self: center;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    padding-top: 1px;
    padding-bottom: 1px;
}

.pipeline-board[data-density="compact"] .pipeline-card-title,
.pipeline-card.is-compact .pipeline-card-title {
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.pipeline-board[data-density="compact"] .pipeline-priority,
.pipeline-card.is-compact .pipeline-priority {
    margin-top: 0;
}

.pipeline-board[data-density="compact"] .pipeline-card-foot,
.pipeline-card.is-compact .pipeline-card-foot {
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.pipeline-board[data-density="compact"] .pipeline-tags,
.pipeline-card.is-compact .pipeline-tags {
    display: none;
}

.pipeline-board[data-density="compact"] .pipeline-avatar,
.pipeline-card.is-compact .pipeline-avatar {
    width: 18px;
    height: 18px;
    font-size: 8.5px;
}

.pipeline-board[data-density="compact"] .pipeline-card-check {
    top: 4px;
}

.pipeline-board[data-density="compact"] .pipeline-skel-column {
    gap: 6px;
}

.pipeline-board[data-density="compact"] .pipeline-skel-card {
    height: 40px;
}

/* ---------- Drag & drop ---------- */

.pipeline-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
    z-index: var(--z-toast, 9999);
    transform-origin: center;
    background: var(--surface-strong, var(--card));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    rotate: 1.5deg;
    opacity: 0.97;
    cursor: grabbing;
}

.pipeline-drag-ghost .pipeline-card-menu-btn,
.pipeline-drag-ghost .pipeline-card-check {
    display: none;
}

.pipeline-drop-slot {
    flex: 0 0 auto;
    border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, transparent);
    border-radius: var(--pipeline-card-radius);
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    min-height: 44px;
}

body.pipeline-is-dragging,
body.pipeline-is-dragging * {
    cursor: grabbing !important;
}

body.pipeline-is-dragging .pipeline-column-body {
    min-height: 72px;
}

body.pipeline-is-dragging .pipeline-column.is-collapsed {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--band) 45%, var(--pipeline-pane-border));
}

body.pipeline-is-dragging .pipeline-column.is-collapsed.is-drop-target {
    border-style: solid;
    border-color: var(--band);
    background: color-mix(in srgb, var(--band) 12%, var(--pipeline-pane));
}

/* ---------- Stage tints ----------
   Each column carries a faint wash of its own stage band (the one place
   several bands share the screen), a touch stronger at the head, its count
   pill in the band and a band hairline on the quick-add composer. Neutral
   stages stay plain and cards keep their own surface. :where() keeps these
   under the over-WIP, has-matches and drag-target rules. Behind @supports:
   var() inside color-mix() can't fall back by declaration order, so an
   engine without color-mix gets a plain surface instead. */

@supports (background: color-mix(in srgb, red 50%, blue)) {
    .pipeline-column:where(:not([data-band="neutral"])) {
        background:
            linear-gradient(to bottom, color-mix(in srgb, var(--band) var(--pipeline-tint-head), transparent), transparent 76px),
            color-mix(in srgb, var(--band) var(--pipeline-tint), var(--pipeline-pane));
        border-color: color-mix(in srgb, var(--band) 14%, var(--pipeline-pane-border));
    }

    .pipeline-column:where(:not([data-band="neutral"])) .pipeline-column-count {
        background: color-mix(in srgb, var(--band) 10%, var(--card));
        border-color: color-mix(in srgb, var(--band) 24%, var(--border-light));
        color: color-mix(in srgb, var(--band) 70%, var(--foreground));
    }

    /* A shade more ink so the muted total keeps AA on the tinted head */
    .pipeline-column:where(:not([data-band="neutral"])) .pipeline-column-sum {
        color: color-mix(in srgb, var(--muted-foreground) 85%, var(--foreground));
    }

    .pipeline-column:where(:not([data-band="neutral"])) .pipeline-composer:not(:focus-within) {
        border-color: color-mix(in srgb, var(--band) 30%, var(--border));
    }

    /* Insights "In brief": the board's band, barely (its dot already is) */
    .pipeline-page .pipeline-brief {
        background: color-mix(in srgb, var(--band) 3%, var(--surface, var(--card)));
        border-color: color-mix(in srgb, var(--band) 16%, var(--border));
    }

    .pipeline-page .pipeline-brief-eyebrow::before {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--band) 16%, transparent);
    }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .pipeline-column,
    .pipeline-skel-column {
        background: var(--card);
    }
}

/* ---------- Skeleton ---------- */

.pipeline-skeleton {
    display: flex;
    gap: 12px;
}

.pipeline-skel-column {
    flex: 0 0 var(--pipeline-column-w);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--pipeline-pane-border);
    border-radius: var(--pipeline-radius);
    background: var(--pipeline-pane);
}

.pipeline-skel-card {
    height: 64px;
    border-radius: var(--pipeline-card-radius);
}

/* ---------- Empty workspace hero ---------- */

.pipeline-hero {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: var(--surface-soft, var(--background-secondary));
}

.pipeline-hero[hidden] {
    display: none;
}

.pipeline-hero-copy h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 500;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-tight);
    margin: 0 0 0.375rem;
    color: var(--foreground);
}

.pipeline-hero-copy p {
    margin: 0;
    max-width: 62ch;
    font-size: var(--fs-body);
    line-height: var(--leading-snug);
    color: var(--foreground-secondary);
}

/* ---------- Template cards (hero + new-pipeline dialog) ---------- */

.pipeline-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

/* Specificity note: in the new-pipeline dialog these are <label>s inside a
   .neu-form-group, and modern.css's `.neu-form-group label` (display: block,
   margin-bottom) would otherwise win and run name and description together. */
.pipeline-template-grid > .pipeline-template-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 12px 14px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pipeline-template-card:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--pipeline-lift);
    border-color: color-mix(in srgb, var(--band) 40%, var(--border));
}

.pipeline-template-card:focus-within,
.pipeline-template-card.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.pipeline-template-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pipeline-template-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.pipeline-template-desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--foreground-secondary);
}

/* Stage preview: one bar per stage in the template's own accent, fading
   left to right (never one band per stage — that would read as a strip). */
.pipeline-template-stages {
    display: flex;
    gap: 3px;
    margin-top: 2px;
}

.pipeline-template-stages i {
    flex: 1 1 0;
    height: 5px;
    border-radius: 999px;
    background: var(--band);
    opacity: calc(0.95 - var(--i, 0) * 0.11);
}

.pipeline-template-meta {
    font-size: 11px;
    color: var(--muted-foreground);
}

/* ---------- Dialogs (shared chrome, scoped) ---------- */

.pipeline-page .neu-modal {
    border-radius: 16px;
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pipeline-page .neu-modal[open] {
    animation: pipeline-sheet-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pipeline-sheet-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* The veil is modern.css's (.neu-modal::backdrop, both themes); here it
   fades in with the sheet so the page doesn't blink dark before the panel
   lands. A confirm opened over a sheet stacks above it in the top layer. */
.pipeline-page .neu-modal[open]::backdrop {
    animation: pipeline-backdrop-in 0.22s ease-out;
}

@keyframes pipeline-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.pipeline-page .neu-modal-header {
    padding: 1rem 1.5rem 0.875rem;
    border-bottom-color: var(--border-light);
}

.pipeline-page .neu-modal-header h3 {
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
}

.pipeline-page .neu-modal-body {
    padding: 1.25rem 1.5rem;
}

.pipeline-page .neu-modal-footer {
    padding: 0.875rem 1.5rem;
    background: transparent;
    border-top-color: var(--border-light);
}

.pipeline-help {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--foreground-secondary);
}

.pipeline-days-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pipeline-days-row .neu-input {
    flex: 0 0 auto;
    width: 7rem;
}

.pipeline-days-row span {
    font-size: 0.875rem;
    color: var(--foreground-secondary);
}

.pipeline-days-preview {
    margin: 0;
}

.pipeline-optional {
    margin-left: 4px;
    font-weight: 400;
    color: var(--muted-foreground);
}

.pipeline-section-title {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--foreground);
}

.pipeline-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
}

.pipeline-currency {
    text-transform: uppercase;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-modal-footer {
    justify-content: flex-end;
}

.pipeline-footer-left {
    margin-right: auto;
}

.pipeline-link-btn {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pipeline-link-btn:hover {
    text-decoration: underline;
}

.pipeline-link-btn + .pipeline-link-btn {
    margin-left: 0;
}

/* ---------- Card sheet ----------
   The card dialog reads like a document: a big title, the linked record, the
   stage as a pill, a strip of key facts, then properties, notes and activity.
   Controls are borderless until hovered or focused. */

.pipeline-sheet {
    max-width: 680px;
}

/* Translucent sheet: the shaded board shows through as an even haze (the
   blur), the board's band washes the body (below), head and foot stay
   clean. Details and Notes share one quieter surface. Opaque where
   backdrop-filter is missing. */
.pipeline-page .pipeline-sheet {
    --pipeline-sheet-surface: color-mix(in srgb, var(--card) 55%, transparent);
    --pipeline-sheet-line: color-mix(in srgb, var(--band) 14%, var(--border));
    background: color-mix(in srgb, var(--card) 86%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    backdrop-filter: blur(22px) saturate(1.15);
}

[data-theme="dark"] .pipeline-page .pipeline-sheet {
    background: color-mix(in srgb, var(--card) 80%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pipeline-page .pipeline-sheet,
    [data-theme="dark"] .pipeline-page .pipeline-sheet {
        background: var(--card);
    }
}

/* Docked to the right edge like the record sheets (sheet.css
   dialog.record-sheet, same numbers): full height, the head and foot stay
   put and the body scrolls between them; full width on phones. The [open]
   rule beats .neu-modal[open] { margin: auto }, this page's centred
   pipeline-sheet-in and a .space-y-8 wrapper's margin-top (0,3,0). */
.pipeline-page dialog.neu-modal.pipeline-sheet {
    width: min(680px, 100vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    border: 0;
    border-left: 1px solid var(--surface-border, var(--border));
    border-radius: 0;
    box-shadow: var(--shadow-lift, 0 24px 64px rgba(0, 0, 0, 0.16));
}

.pipeline-page dialog.neu-modal.pipeline-sheet[open] {
    margin: 0 0 0 auto;
    animation: pipeline-sheet-dock 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pipeline-sheet-dock {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .pipeline-page .pipeline-sheet,
    [data-theme="dark"] .pipeline-page .pipeline-sheet {
        background: var(--card);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.pipeline-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0.875rem 1.25rem 0.5rem 1.5rem;
    flex-shrink: 0;
}

.pipeline-sheet-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    color: var(--foreground-secondary);
}

.pipeline-sheet-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--band);
}

.pipeline-sheet-crumb-board {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.pipeline-sheet-mode {
    flex: 0 0 auto;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.pipeline-sheet-mode::before {
    content: "·";
    margin-right: 8px;
}

.pipeline-sheet-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.pipeline-sheet-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    font-size: 12px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.pipeline-sheet-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--primary);
}

.pipeline-sheet-status.is-dirty::before {
    background: var(--warning);
}

.pipeline-sheet-status:empty {
    display: none;
}

.pipeline-sheet-head .neu-btn {
    min-height: 34px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

.pipeline-sheet-head .neu-modal-close {
    margin-left: 2px;
}

.pipeline-page .pipeline-sheet-body {
    padding: 0.25rem 1.5rem 1.25rem; /* same specificity as .pipeline-page .neu-modal-body, later wins */
    background:
        radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--band) 6%, transparent), transparent 62%),
        radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--band) 3%, transparent), transparent 58%);
}

[data-theme="dark"] .pipeline-page .pipeline-sheet-body {
    background:
        radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--band) 9%, transparent), transparent 62%),
        radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--band) 5%, transparent), transparent 58%);
}

.pipeline-sheet-title {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 4px 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: var(--tracking-snug);
    line-height: var(--leading-tight);
    color: var(--foreground);
    transition: border-color 0.15s ease;
}

.pipeline-sheet-title::placeholder {
    color: var(--muted-foreground);
    font-weight: 500;
}

.pipeline-sheet-title:hover:not(:disabled) {
    border-bottom-color: var(--border);
}

.pipeline-sheet-title:focus {
    outline: none;
    border-bottom-color: var(--primary);
}

/* Read-only sheets still read as a document, not as greyed-out controls */
.pipeline-sheet input:disabled,
.pipeline-sheet select:disabled,
.pipeline-sheet textarea:disabled {
    opacity: 1;
    color: var(--foreground);
    -webkit-text-fill-color: var(--foreground);
    cursor: default;
}

/* Linked record */
.pipeline-sheet-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 28px;
    margin-bottom: 10px;
}

.pipeline-sheet-link .pipeline-chip {
    font-size: 13px;
    padding: 3px 10px 3px 9px;
}

.pipeline-sheet-link .pipeline-chip svg {
    width: 12px;
    height: 12px;
}

.pipeline-sheet-link .pipeline-link-btn {
    margin-left: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--foreground-secondary);
}

.pipeline-sheet-link .pipeline-link-btn:hover {
    color: var(--primary);
}

.pipeline-link-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 9px;
    border: 1px dashed var(--input-border);
    border-radius: 999px;
    background: transparent;
    color: var(--foreground-secondary);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.pipeline-link-add svg {
    width: 12px;
    height: 12px;
}

.pipeline-link-add:hover,
.pipeline-link-add:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
    outline: none;
}

.pipeline-link-add:disabled {
    display: none;
}

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

.pipeline-entity-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.pipeline-entity-chosen[hidden] {
    display: none;
}

.pipeline-entity-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 10px;
    margin: 2px 0 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background-secondary);
}

.pipeline-entity-picker[hidden] {
    display: none;
}

.pipeline-entity-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pipeline-entity-types {
    align-self: flex-start;
}

.pipeline-entity-picker .neu-input {
    border-radius: 9px;
}

.pipeline-entity-results {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 184px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

.pipeline-entity-results:empty {
    display: none;
}

.pipeline-entity-results li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
}

.pipeline-entity-results li:last-child {
    border-bottom: none;
}

.pipeline-entity-results li:hover,
.pipeline-entity-results li:focus-visible {
    background: var(--secondary);
    outline: none;
}

.pipeline-entity-results li.is-note {
    color: var(--muted-foreground);
    cursor: default;
}

.pipeline-entity-results .hint {
    color: var(--muted-foreground);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stage pill */
.pipeline-stage-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 0 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--band) 12%, transparent);
    color: color-mix(in srgb, var(--band) 82%, var(--foreground));
}

.pipeline-stage-pill::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 999px;
    background: var(--band);
    pointer-events: none;
}

.pipeline-stage-pill::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.8;
    pointer-events: none;
}

.pipeline-sheet.is-locked .pipeline-stage-pill::after {
    display: none;
}

.pipeline-stage-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 100%;
    margin: 0;
    padding: 5px 30px 5px 26px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    text-overflow: ellipsis;
}

.pipeline-sheet.is-locked .pipeline-stage-select {
    padding-right: 14px;
}

.pipeline-stage-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--band) 28%, transparent);
}

.pipeline-sheet .pipeline-stage-select:disabled { /* beats `.pipeline-sheet select:disabled` */
    color: inherit;
    -webkit-text-fill-color: currentColor;
}

/* Facts strip: value · owner · due */
.pipeline-facts {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 0.75rem;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.pipeline-fact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 12px 16px 12px 0;
}

.pipeline-fact + .pipeline-fact {
    padding-left: 16px;
    border-left: 1px solid var(--border-light);
}

.pipeline-fact-label {
    font-size: var(--fs-eyebrow-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--foreground-secondary);
}

.pipeline-fact-control {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.pipeline-fact input,
.pipeline-fact select {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--foreground);
    box-shadow: inset 0 -2px 0 transparent;
    transition: box-shadow 0.15s ease;
}

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

.pipeline-fact input:hover:not(:disabled),
.pipeline-fact select:hover:not(:disabled) {
    box-shadow: inset 0 -2px 0 var(--border);
}

.pipeline-fact input:focus,
.pipeline-fact select:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--primary);
}

.pipeline-fact--value .pipeline-value-input {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-fact--value .pipeline-currency {
    flex: 0 0 auto;
    width: 3.4em;
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground-secondary);
}

.pipeline-fact--value .pipeline-currency::placeholder {
    color: var(--foreground-secondary);
    opacity: 0.8;
}

.pipeline-fact select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 20px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-fact-control.has-select::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -5px;
    border-right: 1.5px solid var(--muted-foreground);
    border-bottom: 1.5px solid var(--muted-foreground);
    transform: rotate(45deg);
    pointer-events: none;
}

.pipeline-sheet.is-locked .pipeline-fact-control.has-select::after {
    display: none;
}

.pipeline-fact input[type="date"] {
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-fact input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
    cursor: pointer;
}

.pipeline-sheet.is-locked .pipeline-fact input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

/* An empty date shows "Not set" instead of the browser's mm/dd/yyyy mask */
.pipeline-fact--date.is-empty input:not(:focus) {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.pipeline-fact--date.is-empty .pipeline-fact-control::after {
    content: "Not set";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted-foreground);
    pointer-events: none;
}

.pipeline-fact--date.is-empty:focus-within .pipeline-fact-control::after {
    display: none;
}

/* Sections */
.pipeline-sheet-section {
    margin-top: 1.125rem;
}

.pipeline-sheet-section > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px;
    font-size: var(--fs-eyebrow-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--foreground-secondary);
}

.pipeline-sheet-section > h4 .pipeline-link-btn {
    margin-left: 0;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

/* Details: the one panel in the sheet. Its rows share #pc-props, so any of
   them can be reordered (grip) or hidden (arrow); hidden rows wait under
   the fold line. The grips own a 16px gutter, so the eyebrow lines up with
   the labels. */
.pipeline-sheet-details {
    padding: 10px 12px 8px;
    border: 1px solid var(--pipeline-sheet-line);
    border-radius: 12px;
    background: var(--pipeline-sheet-surface);
}

.pipeline-sheet-details > h4 {
    min-height: 20px;
    padding-left: 20px;
}

/* Properties: grip, label column, quiet control, hide arrow */
.pipeline-props {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pipeline-props > .pipeline-prop {
    position: relative;
    grid-template-columns: 16px 136px minmax(0, 1fr) 24px;
    column-gap: 8px;
    padding: 2px 4px;
}

.pipeline-props > .pipeline-prop > .pipeline-prop-label {
    padding-right: 4px;
}

.pipeline-prop-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pipeline-prop-tool svg {
    width: 14px;
    height: 14px;
}

.pipeline-prop-grip {
    width: 16px;
    cursor: grab;
    touch-action: none;
}

/* A finger-sized target around the narrow grip */
.pipeline-prop-grip::before {
    content: "";
    position: absolute;
    inset: -6px -4px;
}

.pipeline-prop-hide svg {
    transition: transform 0.18s ease;
}

.pipeline-props > .pipeline-prop:hover > .pipeline-prop-tool,
.pipeline-props > .pipeline-prop:focus-within > .pipeline-prop-tool,
.pipeline-prop-tool:focus-visible {
    opacity: 1;
}

.pipeline-prop-tool:hover {
    background: color-mix(in srgb, var(--foreground) 7%, transparent);
    color: var(--foreground);
}

.pipeline-prop-tool:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Hidden rows, shown by Expand all: under a faint line, a lighter label
   (weight, not opacity, so contrast holds; values keep full colour so a
   filled one never reads as a placeholder), the arrow flipped to "show by
   default". */
.pipeline-props > .pipeline-prop.is-fold-start {
    margin-top: 5px;
}

.pipeline-props > .pipeline-prop.is-fold-start::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 28px;
    right: 4px;
    height: 1px;
    background: var(--pipeline-sheet-line);
}

.pipeline-props > .pipeline-prop.is-folded > .pipeline-prop-label {
    font-weight: 400;
}

.pipeline-props > .pipeline-prop.is-folded > .pipeline-prop-hide svg {
    transform: rotate(180deg);
}

/* Reordering: the lifted row follows the pointer, the others slide aside */
.pipeline-props.is-sorting {
    -webkit-user-select: none;
    user-select: none;
}

.pipeline-props.is-sorting > .pipeline-prop {
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.12s ease;
}

.pipeline-props.is-sorting > .pipeline-prop.is-dragging {
    z-index: 2;
    transition: none;
    background: var(--card);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px color-mix(in srgb, var(--band) 28%, var(--border));
}

[data-theme="dark"] .pipeline-props.is-sorting > .pipeline-prop.is-dragging {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px color-mix(in srgb, var(--band) 34%, var(--border));
}

.pipeline-props.is-sorting .pipeline-prop-grip {
    cursor: grabbing;
}

/* The fold line reads like a row: chevron in the grip gutter, muted text */
.pipeline-props-more {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    min-height: 36px;
    margin: 0 -8px;
    padding: 2px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-foreground);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pipeline-props-more:hover {
    background: color-mix(in srgb, var(--secondary) 70%, transparent);
    color: var(--foreground);
}

.pipeline-props-more:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.pipeline-props-more svg {
    justify-self: center;
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
}

.pipeline-props-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.pipeline-props-more span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-prop {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 36px;
    margin: 0 -8px;
    padding: 2px 8px;
    border-radius: 8px;
    transition: background 0.12s ease;
}

.pipeline-prop:hover {
    background: color-mix(in srgb, var(--secondary) 70%, transparent);
}

.pipeline-prop-label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--foreground-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-prop .neu-input,
.pipeline-prop .neu-select {
    min-height: 32px;
    padding: 4px 8px;
    border-color: transparent;
    border-radius: 7px;
    background: transparent;
    font-size: 13.5px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pipeline-prop .neu-select {
    padding-right: 2rem;
    background-color: transparent;
    background-position: right 0.5rem center;
}

.pipeline-prop .neu-input:hover:not(:disabled),
.pipeline-prop .neu-select:hover:not(:disabled) {
    border-color: var(--border);
    background-color: var(--card);
}

.pipeline-prop .neu-input:focus,
.pipeline-prop .neu-select:focus {
    border-color: var(--primary);
    background-color: var(--card);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.pipeline-sheet.is-locked .pipeline-prop .neu-select {
    background-image: none;
}

.pipeline-prop .neu-input::placeholder {
    color: var(--muted-foreground);
}

.pipeline-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    font-size: 13.5px;
    color: var(--foreground);
}

.pipeline-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Notes */
.pipeline-sheet-notes {
    display: block;
    width: 100%;
    min-height: 84px;
    max-height: 320px;
    padding: 9px 11px;
    border: 1px solid var(--pipeline-sheet-line);
    border-radius: 10px;
    background: var(--pipeline-sheet-surface);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--foreground);
    resize: none;
    overflow-y: auto;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pipeline-sheet-notes::placeholder {
    color: var(--muted-foreground);
}

.pipeline-sheet-notes:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--band) 26%, var(--border));
}

.pipeline-sheet-notes:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.pipeline-sheet-notes:disabled {
    border-color: transparent;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* Files (static/css/attachments.css styles the component itself) */
.pipeline-files[hidden],
.pipeline-files [hidden] {
    display: none;
}

.pipeline-files > h4 {
    justify-content: flex-start;
    gap: 6px;
}

.pipeline-files-count {
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-files-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted-foreground);
}

/* Activity */
.pipeline-history[hidden] {
    display: none;
}

.pipeline-history ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.pipeline-history li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-top: 1px solid var(--border-light);
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--foreground-secondary);
}

.pipeline-history li:first-child {
    border-top: 0;
}

.pipeline-history li > span {
    min-width: 0;
    overflow-wrap: anywhere; /* a long file name in "attached …" */
}

.pipeline-history li time {
    flex: 0 0 auto;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-history.is-collapsed li:nth-child(n + 6) {
    display: none;
}

/* Footer: meta on the left, quiet secondary actions on the right */
.pipeline-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0.625rem 1.25rem 0.625rem 1.5rem;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.pipeline-sheet-meta {
    min-width: 0;
    font-size: 12px;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-sheet-foot-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.pipeline-sheet-foot .pipeline-link-btn {
    margin-left: 0;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--foreground-secondary);
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.pipeline-sheet-foot .pipeline-link-btn:hover {
    background: var(--secondary);
    color: var(--foreground);
    text-decoration: none;
}

.pipeline-sheet-foot .pipeline-link-btn.is-danger:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.pipeline-sheet-foot .pipeline-link-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 768px) {
    /* iOS zooms any focused control under 16px (modern.css does the same
       for .neu-* at this width; these controls override those sizes). */
    .pipeline-stage-select,
    .pipeline-fact input,
    .pipeline-fact select,
    .pipeline-fact--value .pipeline-currency,
    .pipeline-prop .neu-input,
    .pipeline-prop .neu-select,
    .pipeline-checkbox,
    .pipeline-sheet-notes,
    .pipeline-composer-input {
        font-size: 16px;
    }

    .pipeline-fact--value .pipeline-currency {
        width: 3.2em;
    }

    /* modern.css sets `header { padding: 12px 16px !important }` here */
    .pipeline-sheet-head {
        padding: 0.75rem 0.875rem 0.5rem 1rem !important;
    }
}

@media (max-width: 640px) {
    .pipeline-page dialog.neu-modal.pipeline-sheet {
        width: 100vw;
        border-left: 0;
    }

    .pipeline-sheet-foot {
        padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
    }

    .pipeline-page .pipeline-sheet-body {
        padding: 0.25rem 1rem 1rem;
    }

    .pipeline-sheet-title {
        font-size: 1.25rem;
    }

    /* The head also holds the Ask Enne control on phones: drop Cancel (the
       close glyph and Esc carry the same data-close) so the board crumb keeps
       its name instead of truncating to one letter. */
    .pipeline-sheet-head-actions > #pc-cancel {
        display: none;
    }

    .pipeline-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .pipeline-fact {
        padding: 10px 0;
    }

    .pipeline-fact + .pipeline-fact {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--border-light);
    }

    .pipeline-prop {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .pipeline-props > .pipeline-prop {
        grid-template-columns: 16px 104px minmax(0, 1fr) 24px;
    }

    .pipeline-sheet-details {
        padding: 8px 10px 6px;
    }

    .pipeline-sheet-foot {
        padding: 0.5rem 0.875rem 0.5rem 1rem;
    }

    .pipeline-sheet-status {
        display: none;
    }
}

/* Stage rows (stages dialog) */
.pipeline-stage-rows,
.pipeline-field-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.pipeline-stage-row,
.pipeline-field-row {
    display: grid;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: var(--background-secondary);
}

.pipeline-stage-row {
    grid-template-columns: auto minmax(0, 1fr) 112px 72px auto;
}

.pipeline-field-row {
    grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 1fr) auto;
}

.pipeline-stage-row .neu-input,
.pipeline-stage-row .neu-select,
.pipeline-field-row .neu-input,
.pipeline-field-row .neu-select {
    min-height: 34px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.8125rem;
}

/* 110px tracks: a tighter chevron so "Checkbox" / "Parked" still fit */
.pipeline-stage-row .neu-select,
.pipeline-field-row .neu-select {
    padding-right: 1.75rem;
    background-position: right 0.5rem center;
}

.pipeline-row-actions {
    display: inline-flex;
    gap: 2px;
}

.pipeline-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--foreground-secondary);
    cursor: pointer;
}

.pipeline-icon-btn:hover:not([disabled]) {
    background: var(--card);
    color: var(--foreground);
}

.pipeline-icon-btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.pipeline-icon-btn.is-danger:hover:not([disabled]) {
    color: var(--danger);
}

.pipeline-icon-btn svg {
    width: 14px;
    height: 14px;
}

.pipeline-stage-remove {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--foreground-secondary);
}

.pipeline-stage-remove[hidden] {
    display: none;
}

.pipeline-stage-remove .neu-select {
    width: auto;
    min-width: 160px;
}

.pipeline-stage-row.is-removed > :not(.pipeline-stage-remove) {
    opacity: 0.45;
}

.pipeline-field-key {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--muted-foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.pipeline-field-row.is-removed > :not(.pipeline-field-key) {
    opacity: 0.45;
}

/* Colour picker (7 brand dots) */
.pipeline-colour-picker {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 38px;
}

.pipeline-colour-dot {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--band);
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: transform 0.12s ease;
}

.pipeline-colour-dot:hover {
    transform: scale(1.08);
}

.pipeline-colour-dot[aria-checked="true"] {
    border-color: var(--foreground);
    box-shadow: 0 0 0 2px var(--card), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.pipeline-stage-row .pipeline-colour-picker {
    min-height: 0;
}

.pipeline-stage-row .pipeline-colour-dot {
    width: 14px;
    height: 14px;
}

@media (max-width: 640px) {
    .pipeline-stage-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .pipeline-stage-row .ps-kind,
    .pipeline-stage-row .ps-wip {
        grid-column: 2 / span 2;
    }

    .pipeline-field-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .pipeline-field-row .pf-type,
    .pipeline-field-row .pf-options {
        grid-column: 1 / -1;
    }
}

/* ---------- Insights ---------- */

.pipeline-insights[hidden] {
    display: none;
}

.pipeline-insights-head {
    display: flex;
    justify-content: flex-end;
    margin: -0.25rem 0 1rem;
}

.pipeline-insights-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pipeline-insight-totals {
    margin: 0;
}

.pipeline-insight-board {
    padding: 16px 18px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: var(--pipeline-radius);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
}

.pipeline-insight-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin-bottom: 12px;
}

.pipeline-insight-head h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.pipeline-insight-head h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--band);
}

.pipeline-insight-head h3 a {
    color: inherit;
    text-decoration: none;
}

.pipeline-insight-head h3 a:hover {
    color: var(--primary);
}

.pipeline-insight-sub {
    font-size: 12.5px;
    color: var(--foreground-secondary);
}

.pipeline-insight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .pipeline-insight-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pipeline-insight-block h4 {
    margin: 0 0 8px;
    font-size: var(--fs-eyebrow-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--foreground-secondary);
}

.pipeline-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pipeline-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 108px) minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--foreground-secondary);
}

.pipeline-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--secondary);
    overflow: hidden;
}

.pipeline-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--band);
    opacity: 0.9;
    min-width: 0;
}

.pipeline-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--foreground);
}

.pipeline-spark {
    display: block;
    width: 100%;
    height: 64px;
}

.pipeline-spark-legend {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--foreground-secondary);
}

.pipeline-spark-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}

.pipeline-mini-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
}

.pipeline-mini-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.pipeline-mini-list li > :first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--foreground);
}

.pipeline-mini-list li a {
    color: inherit;
    text-decoration: none;
}

.pipeline-mini-list li a:hover {
    color: var(--primary);
}

.pipeline-mini-list li > :last-child {
    flex: 0 0 auto;
    color: var(--foreground-secondary);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-muted {
    font-size: 12.5px;
    color: var(--muted-foreground);
}

/* ---------- Board · Insights tabs ----------
   Underline tabs under the header (the selected one in the board's band);
   the period picker sits at their far end on the Insights tab. */

.pipeline-page {
    /* Small red text: the dark theme's --danger is too dim on a card */
    --pipeline-danger-text: var(--danger);
    --pipeline-neutral-mark: color-mix(in srgb, var(--foreground) 17%, transparent);
}

[data-theme="dark"] .pipeline-page {
    --pipeline-danger-text: color-mix(in srgb, var(--danger) 78%, var(--foreground));
    --pipeline-neutral-mark: color-mix(in srgb, var(--foreground) 24%, transparent);
}

/* 36px: the tabs, then this view's status on the same line (Board: the
   archived notice and the Suggested summary; Insights: the period). */
.pipeline-tabs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 12px;
    margin: 0 0 0.5rem;
    border-bottom: 1px solid var(--border);
}

.pipeline-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    min-width: 0;
}

@media (min-width: 769px) {
    .pipeline-tabs-row {
        flex-wrap: nowrap;
    }
}

.pipeline-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px 8px;
    border-radius: 8px 8px 0 0;
    color: var(--foreground-secondary);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.pipeline-tab:hover {
    color: var(--foreground);
    background: color-mix(in srgb, var(--secondary) 70%, transparent);
}

.pipeline-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.pipeline-tab[aria-selected="true"] {
    color: var(--foreground);
}

.pipeline-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--band);
}

.pipeline-tabs-row .pipeline-period {
    margin-bottom: 6px;
}

.pipeline-period button {
    padding: 5px 12px;
}

.pipeline-period button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

/* The all-pipelines overview links each pipeline to its Insights tab */
.pipeline-insight-more {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.pipeline-insight-more:hover {
    text-decoration: underline;
}

/* ---------- A pipeline's Insights tab ----------
   Headline tiles, then blocks in two columns on wide screens. Every block
   is heading + one-line caption + content; the board's band is the accent,
   rust only marks losses and jade wins. */

.pipeline-stats {
    padding-bottom: 1.5rem;
}

.pipeline-stats-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: opacity 0.15s ease;
}

/* A refresh or a period switch keeps the figures, dimmed, until it lands */
.pipeline-stats-body.is-loading {
    opacity: 0.55;
}

.pipeline-stats-loading {
    margin: 1rem 0;
}

/* Headline tiles: one translucent surface; each tile's 1px ring fills the
   1px grid gap (the outer rings are clipped), so the hairlines need no
   opaque backing showing through the glass */
.pipeline-stats-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: 12px;
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
    overflow: hidden;
}

.pipeline-stats-tiles .pipeline-metric {
    gap: 3px;
    padding: 12px 16px 13px;
    border: 0;
    background: transparent;
    box-shadow: 0 0 0 1px var(--border-light);
}

.pipeline-stats-tiles .pipeline-metric-value {
    font-size: 24px;
}

@media (min-width: 640px) {
    .pipeline-stats-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .pipeline-stats-tiles {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* "In brief": the AI note under the headline tiles (pipeline.js renderBrief).
   A quiet card: eyebrow, one plain paragraph, then age · Refresh. The dot is
   the board's own band, the only colour in it. */
.pipeline-brief {
    min-width: 0;
    padding: 13px 18px 12px;
    background: var(--surface, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--pipeline-radius);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
}

.pipeline-brief:focus {
    outline: none;
}

.pipeline-brief:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-brief-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font-size: var(--fs-eyebrow-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--foreground-secondary);
}

.pipeline-brief-eyebrow::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--band);
}

.pipeline-brief-text {
    max-width: 72ch;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.pipeline-brief-muted {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

.pipeline-brief-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--muted-foreground);
}

.pipeline-brief-note {
    min-width: 0;
    overflow-wrap: anywhere;
}

.pipeline-page .pipeline-brief-btn {
    margin: 0;
    padding: 0;
    border-radius: 3px;
    font-size: inherit;
    line-height: inherit;
}

.pipeline-page .pipeline-brief-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.pipeline-page .pipeline-brief-btn:disabled,
.pipeline-page .pipeline-brief-btn[aria-disabled="true"] {
    color: var(--muted-foreground);
    text-decoration: none;
    cursor: default;
}

.pipeline-brief-skel {
    display: grid;
    gap: 9px;
    max-width: 72ch;
    padding: 5px 0 3px;
}

.pipeline-brief-skel .skel-line:last-child {
    width: 62%;
}

/* ▲/▼ against the previous period: colour says good or bad, words say how much */
.pipeline-delta {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-delta.is-good {
    color: var(--primary);
}

.pipeline-delta.is-bad {
    color: var(--pipeline-danger-text);
}

.pipeline-stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .pipeline-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pipeline-stats-block.is-wide {
        grid-column: 1 / -1;
    }
}

.pipeline-stats-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--surface, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: var(--pipeline-radius);
    box-shadow: inset 0 1px 0 var(--surface-edge, transparent), var(--shadow-rest, 0 0 transparent);
}

.pipeline-stats-block-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.pipeline-stats-block h3 {
    min-width: 0;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.pipeline-stats-caption {
    margin: 3px 0 14px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--muted-foreground);
}

.pipeline-stats-empty {
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--muted-foreground);
    text-align: center;
}

.pipeline-stats-callout {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--foreground);
    overflow-wrap: anywhere;
}

.pipeline-stats-callout strong {
    font-weight: 600;
}

.pipeline-stats-foot,
.pipeline-stats-facts {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--foreground-secondary);
    overflow-wrap: anywhere;
}

.pipeline-stats-other {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.pipeline-stats-toggle button {
    padding: 4px 10px;
    font-size: 12.5px;
}

.pipeline-stats-toggle button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pipeline-stats-count {
    margin-left: 2px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-stats-coverage {
    margin: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--secondary);
    font-size: 12.5px;
    color: var(--foreground-secondary);
}

/* A share bar (funnel stage, momentum) */
.pipeline-meter {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--secondary);
    overflow: hidden;
}

.pipeline-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--band);
}

/* Where deals go */
.pipeline-funnel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pipeline-funnel-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pipeline-funnel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.pipeline-funnel-name {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-funnel-rate {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-funnel-rate small {
    margin-left: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted-foreground);
}

.pipeline-funnel-rate.is-none {
    color: var(--muted-foreground);
}

.pipeline-funnel-facts {
    margin: 0;
    font-size: 11.5px;
    color: var(--muted-foreground);
}

/* Flow over time: neutral columns (created), jade / rust lines (won / lost) */
.pipeline-flow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--foreground-secondary);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-flow-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pipeline-key-bar {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--pipeline-neutral-mark);
}

.pipeline-key-line {
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--band);
}

.pipeline-flow-plot {
    position: relative;
    padding-left: 30px;
}

.pipeline-flow-svg {
    display: block;
    width: 100%;
    height: 150px;
    overflow: visible;
}

.pipeline-flow-y {
    position: absolute;
    left: 0;
    width: 24px;
    transform: translateY(-50%);
    font-size: 10.5px;
    line-height: 1;
    color: var(--muted-foreground);
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-flow-x {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    padding-left: 30px;
    font-size: 10.5px;
    color: var(--muted-foreground);
    white-space: nowrap;
}

.pipeline-flow-bar {
    fill: var(--pipeline-neutral-mark);
}

.pipeline-flow-grid {
    stroke: var(--border-light);
    stroke-width: 1;
}

.pipeline-flow-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.pipeline-flow-line {
    fill: none;
    stroke: var(--band);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pipeline-flow-hit {
    fill: transparent;
}

.pipeline-flow-hit:hover {
    fill: color-mix(in srgb, var(--foreground) 6%, transparent);
}

/* Team */
/* The padding gives the sort buttons' negative margins room to sit in */
.pipeline-table-wrap {
    margin: 0 -6px;
    padding: 0 6px;
    overflow-x: auto;
}

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

.pipeline-table th,
.pipeline-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
    text-align: right;
    white-space: nowrap;
}

.pipeline-table th:first-child,
.pipeline-table td:first-child {
    padding-left: 0;
    text-align: left;
}

.pipeline-table th:last-child,
.pipeline-table td:last-child {
    padding-right: 0;
}

.pipeline-table thead th {
    padding-top: 0;
    padding-bottom: 6px;
    border-bottom-color: var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--foreground-secondary);
}

.pipeline-table tbody th {
    font-weight: 500;
    color: var(--foreground);
}

.pipeline-table tbody tr:last-child > * {
    border-bottom: 0;
}

.pipeline-table td.is-warn {
    font-weight: 600;
    color: var(--pipeline-danger-text);
}

.pipeline-team tr.is-unassigned > * {
    color: var(--foreground-secondary);
}

.pipeline-owner-name {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.pipeline-team .pipeline-flag {
    margin-left: 8px;
}

.pipeline-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 -6px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.pipeline-sort:hover {
    background: var(--secondary);
    color: var(--foreground);
}

.pipeline-sort:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pipeline-sort.is-active {
    color: var(--foreground);
}

.pipeline-sort-icon {
    font-size: 10px;
    opacity: 0.5;
}

.pipeline-sort.is-active .pipeline-sort-icon {
    opacity: 1;
}

/* Flags: overdue is the one red; stuck and unassigned stay quiet */
.pipeline-flag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--foreground-secondary);
    white-space: nowrap;
}

.pipeline-flag[data-flag="overdue"] {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--pipeline-danger-text);
}

/* Accounts */
.pipeline-records {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pipeline-record {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 6px 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 13px;
}

.pipeline-record:first-child {
    padding-top: 0;
}

.pipeline-record:last-child {
    border-bottom: 0;
}

.pipeline-record-name {
    min-width: 0;
}

.pipeline-record-link {
    display: block;
    overflow: hidden;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-record-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.pipeline-record .pipeline-chip svg {
    width: 12px;
    height: 12px;
}

.pipeline-record-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-record-k {
    font-size: 11px;
    color: var(--muted-foreground);
}

/* Horizontal bars: sources, lost reasons */
.pipeline-hbars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pipeline-hbar {
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    font-size: 13px;
}

.pipeline-hbar-label {
    overflow: hidden;
    color: var(--foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-hbar-label.is-muted {
    color: var(--muted-foreground);
    font-style: italic;
}

.pipeline-hbar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--secondary);
    overflow: hidden;
}

.pipeline-hbar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--band);
}

/* "Not set" / "No reason given" read as the absence they are */
.pipeline-hbar-label.is-muted + .pipeline-hbar-track .pipeline-hbar-fill {
    background: var(--pipeline-neutral-mark);
}

.pipeline-hbar-value {
    min-width: 2ch;
    font-weight: 600;
    color: var(--foreground);
    text-align: right;
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-hbar-note {
    grid-column: 2 / -1;
    font-size: 11.5px;
    color: var(--muted-foreground);
}

/* At risk */
.pipeline-risks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pipeline-risk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
}

.pipeline-risk:first-child {
    padding-top: 0;
}

.pipeline-risk:last-child {
    border-bottom: 0;
}

.pipeline-risk-title {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--foreground);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-risk-title:hover {
    color: var(--primary);
    text-decoration: underline;
}

.pipeline-risk-flags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.pipeline-risk-meta {
    grid-column: 1 / -1;
    overflow: hidden;
    font-size: 12px;
    color: var(--muted-foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time to close: one jade column per bucket, its count on top */
.pipeline-hist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.pipeline-hist-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

/* Bars are a % of the 96px content box; the count rides in the headroom */
.pipeline-hist-plot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    box-sizing: content-box;
    width: 100%;
    height: 96px;
    padding-top: 18px;
    border-bottom: 1px solid var(--border);
}

.pipeline-hist-value {
    flex: 0 0 auto;
    padding-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

.pipeline-hist-bar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 44px;
    border-radius: 4px 4px 0 0;
    background: var(--band);
}

.pipeline-hist-label {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.pipeline-hist-axis {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--muted-foreground);
    text-align: center;
}

/* Momentum */
.pipeline-momentum {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.pipeline-momentum > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    color: var(--foreground-secondary);
}

.pipeline-momentum-num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--tracking-snug);
    color: var(--foreground);
    font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 768px) {
    /* Team: each person becomes a small card; the sort buttons a chip row */
    .pipeline-team,
    .pipeline-team thead,
    .pipeline-team tbody,
    .pipeline-team tr,
    .pipeline-team th,
    .pipeline-team td {
        display: block;
    }

    .pipeline-team thead tr {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }

    .pipeline-team thead th,
    .pipeline-team thead th:first-child {
        padding: 0;
        border: 0;
    }

    .pipeline-team .pipeline-sort {
        margin: 0;
    }

    .pipeline-team tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 16px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-light);
    }

    .pipeline-team tbody tr:last-child {
        border-bottom: 0;
    }

    .pipeline-team tbody th,
    .pipeline-team tbody td,
    .pipeline-team tbody th:first-child,
    .pipeline-team tbody td:first-child,
    .pipeline-team tbody td:last-child {
        padding: 0;
        border: 0;
    }

    .pipeline-team tbody th {
        grid-column: 1 / -1;
        white-space: normal;
    }

    .pipeline-team tbody td {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }

    /* The label takes the slack, so a value and its + other stay together */
    .pipeline-team tbody td::before {
        content: attr(data-label);
        margin-right: auto;
        overflow: hidden;
        font-weight: 400;
        color: var(--muted-foreground);
        text-overflow: ellipsis;
    }

    .pipeline-owner-name {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .pipeline-record {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pipeline-record-name {
        grid-column: 1 / -1;
    }

    .pipeline-hbar {
        grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto;
    }

    .pipeline-stats-block {
        padding: 14px 14px 16px;
    }
}

/* ---------- Won/lost reason popover ----------
   Beside the card (or column) a move just landed in, or under the selection
   bar's Move button; a bottom sheet on phones. data-band: rust for lost,
   jade for won. */

.pipeline-reason {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-popover, 220);
    width: min(340px, calc(100vw - 16px));
    padding: 14px 14px 12px;
    background: var(--surface-strong, var(--card));
    border: 1px solid var(--surface-border, var(--border));
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(var(--surface-blur, 18px)) saturate(1.1);
    backdrop-filter: blur(var(--surface-blur, 18px)) saturate(1.1);
    animation: pipeline-reason-in 0.14s ease-out;
}

@keyframes pipeline-reason-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.pipeline-reason-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-reason-title {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--foreground);
}

.pipeline-reason-title::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--band);
}

.pipeline-reason-head .pipeline-icon-btn:hover {
    background: var(--secondary);
}

.pipeline-reason-sub {
    margin: 2px 0 10px 16px;
    overflow: hidden;
    font-size: 12px;
    color: var(--muted-foreground);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pipeline-reason-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.pipeline-reason-chip {
    max-width: 100%;
    padding: 3px 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    font-size: 12px;
    color: var(--foreground-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.pipeline-reason-chip:hover {
    border-color: color-mix(in srgb, var(--band) 50%, var(--border));
    color: var(--foreground);
}

.pipeline-reason-chip[aria-pressed="true"] {
    border-color: var(--band);
    background: color-mix(in srgb, var(--band) 10%, transparent);
    color: var(--foreground);
}

.pipeline-reason-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.pipeline-reason-input {
    width: 100%;
}

.pipeline-reason-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 10px;
}

.pipeline-reason-actions .pipeline-link-btn {
    margin-left: 0;
    color: var(--foreground-secondary);
}

@media (max-width: 640px) {
    .pipeline-reason {
        top: auto;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        left: 8px;
        width: auto;
    }
}

/* The card sheet's reason row sits right under the stage pill */
.pipeline-sheet-reason {
    margin: -6px -8px 10px;
}

.pipeline-sheet-note {
    margin: -6px 0 12px;
    font-size: 12px;
    color: var(--muted-foreground);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-tab,
    .pipeline-stats-body {
        transition: none;
    }

    .pipeline-reason {
        animation: none;
    }
}

/* No color-mix(): modern.css's glass tokens can't resolve, so these
   surfaces fall back to opaque ones (the panes do in "Stage tints"). Kept
   after the rules it overrides. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .pipeline-card,
    .pipeline-composer,
    .pipeline-drag-ghost,
    .pipeline-menu,
    .pipeline-reason,
    .pipeline-selection,
    .pipeline-insight-totals,
    .pipeline-figures,
    .pipeline-suggestions-bar,
    .pipeline-suggestions,
    .pipeline-insight-board,
    .pipeline-stats-tiles,
    .pipeline-brief,
    .pipeline-stats-block,
    .pipeline-template-grid > .pipeline-template-card {
        background: var(--card);
    }

    .pipeline-hero {
        background: var(--background-secondary);
    }
}

/* ---------- Motion & input preferences ---------- */

@media (prefers-reduced-motion: reduce) {
    .pipeline-card,
    .pipeline-template-card,
    .pipeline-colour-dot,
    .pipeline-column,
    .pipeline-column-fold,
    .pipeline-column-rail,
    .pipeline-rail-icon,
    .pipeline-mine-chip,
    .pipeline-composer,
    .pipeline-card-check,
    .pipeline-card-check-box {
        transition: none;
    }

    .pipeline-selection {
        animation: none;
    }

    .pipeline-card:hover,
    .pipeline-template-card:hover,
    .pipeline-colour-dot:hover {
        transform: none;
    }

    .pipeline-drag-ghost {
        rotate: 0deg;
    }

    .pipeline-page .neu-modal[open],
    .pipeline-page .neu-modal[open]::backdrop,
    .pipeline-page dialog.neu-modal.pipeline-sheet[open] {
        animation: none;
    }

    .pipeline-density-btn {
        transition: none;
    }

    .pipeline-figures,
    .pipeline-figures-btn.is-new::after {
        animation: none;
    }

    .pipeline-figures-glyph {
        animation: none;
        stroke-dashoffset: 0;
    }

    .pipeline-figures-chev {
        transition: none;
    }

    .pipeline-prop-tool,
    .pipeline-prop-hide svg,
    .pipeline-props-more,
    .pipeline-props-more svg,
    .pipeline-props.is-sorting > .pipeline-prop {
        transition: none;
    }
}

/* No hover to reveal them: the Details tools stay in view, quieter */
@media (hover: none), (pointer: coarse) {
    .pipeline-prop-tool {
        opacity: 0.6;
    }
}

@media (pointer: coarse) {
    .pipeline-card {
        cursor: default;
    }

    .pipeline-card-menu-btn,
    .pipeline-card-check {
        opacity: 1;
    }

    .pipeline-card-grip {
        display: inline-flex;
        opacity: 1;
    }
}

/* ---------- Mobile ----------
   The page scrolls as a whole; columns grow with their cards and the board
   snaps horizontally between them. */

@media (max-width: 768px) {
    .pipeline-page {
        --pipeline-column-w: 82vw;
    }

    .pipeline-page[data-view="board"],
    .pipeline-page[data-view="loading"] {
        display: block;
        height: auto;
    }

    .pipeline-board {
        scroll-snap-type: x proximity;
        min-height: 0;
        overflow-y: visible;
    }

    .pipeline-column {
        scroll-snap-align: start;
        max-height: none;
    }

    .pipeline-column-body {
        overflow-y: visible;
    }

    /* Its own full-width row above the buttons; 16px so iOS doesn't zoom */
    .pipeline-switcher .neu-select {
        width: 100%;
        max-width: 100%;
        min-height: 40px;
        font-size: 16px;
    }

    .pipeline-actions {
        width: 100%;
    }

    .pipeline-switcher {
        flex: 1 1 100%;
    }

    /* Every figure stays readable: the meta line may wrap, and the Figures
       button drops under it */
    .pipeline-meta-row {
        flex-wrap: wrap;
    }

    .pipeline-header .pipeline-meta {
        white-space: normal;
    }

    .pipeline-figures-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pipeline-figures .pipeline-metric:last-child {
        grid-column: 1 / -1;
    }

    /* The tabs keep their own underline; the archived notice and the
       Suggested summary take full-width lines under them. */
    .pipeline-tabs-row {
        row-gap: 8px;
        border-bottom: 0;
    }

    .pipeline-tabs {
        flex: 1 1 100%;
        border-bottom: 1px solid var(--border);
    }

    .pipeline-tabs-row .pipeline-banner,
    .pipeline-suggestions-bar {
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }

    .pipeline-tabs-row .pipeline-banner {
        justify-content: space-between;
    }

    .pipeline-banner-text {
        white-space: normal;
    }

    /* The page scrolls here: the selection bar floats at the bottom of the
       screen (the filters stay usable) and its menus open upwards. */
    .pipeline-toolbar.is-selecting > :not(.pipeline-selection) {
        visibility: visible;
    }

    .pipeline-selection {
        position: fixed;
        inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px;
        z-index: var(--z-dropdown, 100);
        flex-wrap: wrap;
        min-height: 52px;
        padding: 8px 8px 8px 14px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
        -webkit-backdrop-filter: blur(var(--surface-blur, 18px)) saturate(1.1);
        backdrop-filter: blur(var(--surface-blur, 18px)) saturate(1.1);
    }

    .pipeline-selection-menu {
        top: auto;
        bottom: calc(100% + 6px);
    }

    .pipeline-page.is-selecting {
        padding-bottom: 96px;
    }
}