        .paintops-pipeline-board { display:flex; gap:16px; overflow-x:auto; margin-top:16px; align-items:flex-start; }
        .paintops-pipeline-column { flex:1 1 0; min-width:260px; background:var(--po-tile-bg,#f0f0f1); border-radius:8px; padding:12px; box-sizing:border-box; }
        .paintops-pipeline-column h3 { margin-top:0; }
        /* Full-width Active/Upcoming stripe across the top of each Active
         * Jobs card (negative margins bleed it to the card edges). */
        .paintops-pipeline-stripe { display:block; margin:-10px -12px 10px; padding:5px 12px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; border-radius:5px 5px 0 0; }
        .paintops-pipeline-stripe.po-stripe-active { background:#e6f6ec; color:#1a7a43; }
        .paintops-pipeline-stripe.po-stripe-upcoming { background:#e8f1fb; color:#2f5aae; }
        .paintops-pipeline-stripe.po-stripe-overdue { background:#fff8ec; color:#8a6d3b; }
        .paintops-pipeline-stripe.po-stripe-muted { background:#f0f0f1; color:#667581; }
        /* The whole upper card (stripe + name + address + category) is one
         * link to the job view; the title keeps the accent color as the
         * tap affordance now that the name is no longer its own link. */
        .paintops-pipeline-cardlink { display:block; color:inherit; text-decoration:none; cursor:pointer; }
        .paintops-pipeline-cardlink .paintops-pipeline-card-title { color:var(--po-accent,#4682B4); }
        .paintops-pipeline-cardlink:hover .paintops-pipeline-card-title { text-decoration:underline; }
        .paintops-pipeline-card { display:flex; flex-direction:column; color:var(--po-text,#333); background:var(--po-card-bg,#fff); border:1px solid var(--po-card-border,#ddd); border-radius:6px; padding:10px 12px; margin-bottom:10px; box-sizing:border-box; overflow-wrap:break-word; word-break:break-word; }
        .paintops-pipeline-card-body { flex:1 1 auto; }
        .paintops-pipeline-card-title { font-weight:600; margin-bottom:4px; overflow-wrap:break-word; word-break:break-word; }
        .paintops-pipeline-card-meta { font-size:12px; color:var(--po-text-muted,#555); overflow-wrap:break-word; word-break:break-word; }
        .paintops-pipeline-tag { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; margin-top:7px; border:1px solid transparent; }
        .paintops-pipeline-tag.po-tag-due { background:#fdecea; color:#b3261e; border-color:#f3c2bd; }
        .paintops-pipeline-tag.po-tag-paid { background:#e6f6ec; color:#1a7a43; border-color:#b9e2c9; }
        .paintops-pipeline-tag.po-tag-pending { background:#e6f6ec; color:#1a7a43; border-color:#b9e2c9; }
        /* "Write a Quote" pill is a clickable link styled as the due pill. */
        a.paintops-pipeline-tag-link { text-decoration:none; cursor:pointer; }
        a.paintops-pipeline-tag-link:hover { background:#fbd9d5; }
        .paintops-pipeline-card-actions { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
        .paintops-pipeline-card-actions .paintops-btn { font-size:11px; padding:4px 10px; }
        /* The ONE deliberate exception to the app-wide 44px button
         * min-height: the board's "+ New Request" column button (marked
         * po-btn-compact in job-pipeline.php). box-sizing keeps min-height
         * measuring the full border box on themes without a global
         * border-box reset (Mike 2026-07-28; everything else reverted to
         * the long-standing app-wide sizing). */
        .paintops-btn.po-btn-compact { box-sizing:border-box; min-height:0; line-height:1.3; padding:0.55rem 1.2rem !important; }
        /* "View Job" footer: a consistent bottom-aligned CTA on every card. The
         * body flexes to fill, so this footer is pushed to the card bottom and
         * lands in the same place on each card regardless of content above.
         * A plain text link (not a button) with a north-east arrow. */
        .paintops-pipeline-foot { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; border-top:1px solid var(--po-line,#eee); padding-top:8px; }
        .paintops-pipeline-foot-tag { min-width:0; }
        .paintops-pipeline-foot .paintops-pipeline-tag { margin-top:0; }
        .paintops-pipeline-view { margin-left:auto; }
        .paintops-pipeline-view { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; text-decoration:none; color:var(--po-accent,#4682B4); padding:2px 0; }
        .paintops-pipeline-view:hover { text-decoration:underline; }
        .paintops-pipeline-view-icon { width:18px; height:18px; flex:0 0 auto; display:block; }
        .paintops-pipeline-card-title a { text-decoration:none; }
        /* Older-completed expander (2026-07-22): the newest few completed
         * jobs stay visible, the rest collapse behind this toggle, same
         * cards inside, so history doesn't grow the page forever. */
        .paintops-pipeline-older { margin-top:4px; }
        .paintops-pipeline-older > summary { cursor:pointer; font-weight:600; font-size:13px; color:var(--po-text-muted,#667581); padding:6px 0; }
        .paintops-pipeline-older > summary:hover { color:var(--po-accent,#4682B4); }
        @media (max-width:782px) {
            .paintops-pipeline-board { flex-direction:column; overflow-x:hidden; gap:12px; }
            .paintops-pipeline-column { min-width:0; width:100%; }
            .paintops-pipeline-card { width:100%; padding:14px; }
            .paintops-pipeline-stripe { margin:-14px -14px 10px; padding:6px 14px; }
            /* Phones: the day's work first (Mike 2026-07-23), and each
             * stacked column collapses on tap; Completed starts closed
             * via the small script under the board. */
            .paintops-pipeline-column-active { order:1; }
            .paintops-pipeline-column-quote { order:2; }
            .paintops-pipeline-column-completed { order:3; }
            .paintops-pipeline-column > summary { pointer-events:auto; cursor:pointer; }
            .paintops-pipeline-column > summary::after { content:"\25BE"; position:absolute; right:2px; top:2px; color:var(--po-text-muted,#888); transition:transform .15s ease; }
            .paintops-pipeline-column:not([open]) > summary::after { transform:rotate(-90deg); }
            .paintops-pipeline-column:not([open]) > summary { margin-bottom:0; }
            .paintops-pipeline-card-title { font-size:17px; }
        }
        /* Columns are <details> so phones can collapse them; on desktop
         * the summary is inert (pointer-events:none keeps them always
         * open) and just renders the heading + the muted glance line. */
        .paintops-pipeline-column > summary { list-style:none; pointer-events:none; margin-bottom:10px; position:relative; }
        .paintops-pipeline-column > summary::-webkit-details-marker { display:none; }
        /* Option B headers with the count pill kept (Mike 2026-07-23,
         * revised from option D same day): a short stage-colored accent
         * bar under each title carries the column identity, the count
         * rides in a solid pill of the same color. Stage colors match
         * the card stripe palette. */
        .paintops-pipeline-column-quote { --po-stage:#4682B4; }
        .paintops-pipeline-column-active { --po-stage:#1a7a43; }
        .paintops-pipeline-column-completed { --po-stage:#667581; }
        .paintops-pipeline-column > summary h3 { margin:0; display:flex; align-items:center; gap:8px; font-size:18px; padding-bottom:8px; position:relative; }
        .paintops-pipeline-column > summary h3::after { content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; border-radius:2px; background:var(--po-stage,#4682B4); }
        .paintops-pipeline-count { font-size:12px; font-weight:700; line-height:1.6; color:#fff; background:var(--po-stage,#4682B4); border-radius:999px; padding:1px 9px; margin-left:2px; }
        .paintops-pipeline-colmeta { display:block; font-size:12px; color:var(--po-text-muted,#667581); margin-top:3px; min-height:15px; }
        /* Standalone Job search bar, its own card, matching the
           Customers page search (.paintops-customers-search). */
        .paintops-jobsearch-box { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; background:var(--po-card-bg,#fff); border:1px solid var(--po-card-border,#ddd); border-radius:8px; padding:14px 16px; box-shadow:var(--po-card-shadow,0 1px 2px rgba(0,0,0,.04)); }
        .paintops-jobsearch-box input[type="text"] { flex:1; min-width:200px; height:40px; padding:0 12px; border:1px solid var(--po-input-border,#ccc); border-radius:5px; font-size:14px; box-sizing:border-box; }

/* Call / Text / Email as one segmented control (option C, Mike 2026-07-27).
   Shared shape: reuse .po-contact-seg anywhere a contact strip renders. */
.po-contact-seg { display:inline-flex; border:1px solid var(--po-card-border,#cdd6dd); border-radius:8px; overflow:hidden; vertical-align:middle; background:var(--po-card-bg,#fff); }
.po-contact-seg a { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; font-size:13px; font-weight:600; color:var(--po-accent,#2f5f7a); text-decoration:none; border-left:1px solid var(--po-line,#e2e6ea); }
.po-contact-seg a:first-child { border-left:none; }
.po-contact-seg a:hover { background:var(--po-hover,#f2f7fb); }
.po-contact-seg .dashicons { font-size:15px; width:15px; height:15px; line-height:1; }
