/* Pipeline only: fit working columns and keep the controls near the cards. */
/* THE ONE CONTROL LINE (Chase, 13 Oct). The section is a row that wraps; the
   results frame is `display: contents`, so the controls inside it are the same
   row's items and the results, last and full width, come under the row. Each
   item says where it stands with `order`: Pipeline, the location, Mine |
   Everyone, the find box, New lead, Sales | Jobs, then the ellipsis menu. */
.r2-pipeline-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
.r2-pipeline-frame { display: contents; }
.r2-pipeline-name { order: 0; flex: 0 0 auto; margin: 0; }
.r2-pipeline-where { order: 1; display: flex; align-items: center; gap: .5rem; }
.r2-pipeline-where .ui-input { width: auto; min-width: 8.5rem; max-width: 14rem; }
.r2-pipeline-whose { order: 2; min-width: 0; }
.r2-pipeline-search { order: 3; display: flex; flex: 1 1 14rem; align-items: center; gap: .5rem; min-width: 0; }
.r2-pipeline-search input[type="search"] { width: 100%; min-width: 0; }
.r2-pipeline-starts { order: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.r2-pipeline-views { order: 5; min-width: 0; }
.r2-pipeline-more { order: 6; margin-left: auto; }
.r2-pipeline-top .ui-tabs { margin: 0; }
.r2-pipeline-top .ui-tab { padding: 0 .75rem; }
.r2-pipeline-more-button { gap: .375rem; min-width: 44px; padding: 0 .75rem; font-size: 1.375rem; line-height: 1; }
.r2-pipeline-more-button .ui-board-count { font-size: .75rem; }
/* The ellipsis sits at the right of the row, so its panel hangs from its right
   edge at every width (the shared menu opens rightwards on a phone). */
.r2-pipeline-more .ui-more-menu-panel { right: 0; left: auto; }
.r2-pipeline-panel-part { margin-top: .375rem; padding: .5rem .625rem .375rem; border-top: 1px solid var(--color-line); }
.r2-pipeline-panel-part:first-child { margin-top: 0; border-top: 0; }
.r2-pipeline-panel-part + nav { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--color-line); }
.r2-pipeline-panel-part .ui-eyebrow { padding: 0 0 .25rem; }
.r2-pipeline-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.r2-pipeline-filter-grid > * { min-width: 0; }
.r2-pipeline-results { order: 9; flex: 1 0 100%; min-width: 0; margin-top: .25rem; }
.r2-pipeline-numbers { gap: .75rem; }
.r2-pipeline-filter-chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem .75rem; border-radius: var(--radius-ui); background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: .875rem; }
.r2-pipeline-card { display: flex; flex-direction: column; gap: .5rem; padding: .75rem; overflow-wrap: anywhere; container-type: inline-size; }
.r2-pipeline-card .ui-board-card-top { align-items: flex-start; }
.r2-pipeline-card .ui-board-card-title { font-size: .9375rem; line-height: 1.35; }
.r2-pipeline-menu-target { display: inline-flex; }
.r2-pipeline-card-more { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -.5rem -.5rem 0 0; border-radius: var(--radius-ui); font-size: 1.5rem; }
.r2-pipeline-card-more:hover { background: var(--color-accent-soft); }
.r2-pipeline-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.r2-pipeline-card-foot .ui-board-grip { margin-left: auto; }
/* The rep's FIRST NAME in a pill (Chase, fix list 31 Oct: initials meant nothing). It was a 28px circle, so a
   first name longer than two letters spilled over the PM line beside it (night walk 3 Nov): the pill grows
   to its name, up to seven rem, and then ends in an ellipsis. */
.r2-pipeline-initials { display: inline-block; min-width: 28px; max-width: 7rem; height: 28px; flex: 0 1 auto; padding: 0 .5rem; overflow: hidden; border-radius: 14px; background: var(--color-accent-soft); color: var(--color-accent-strong); font-size: .6875rem; font-weight: 600; line-height: 28px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.r2-pipeline-card [data-card-chip] .ui-badge { white-space: normal; }
.r2-pipeline-older { margin-top: .25rem; }
/* "Show more (N) ▾" on one line: the chevron has no size of its own, so a browser
   sizing the row left it out and then squeezed "(N)" under "Show more". Open, it
   says "Show fewer". */
.r2-pipeline-older > summary { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; white-space: nowrap; list-style: none; cursor: pointer; }
.r2-pipeline-older > summary::-webkit-details-marker { display: none; }
.r2-pipeline-older > summary svg { flex: none; width: 1rem; height: 1rem; }
.r2-pipeline-more-close { display: none; }
.r2-pipeline-older[open] > summary .r2-pipeline-more-open { display: none; }
.r2-pipeline-older[open] > summary .r2-pipeline-more-close { display: inline; }
.r2-pipeline-older[open] > summary svg { transform: rotate(180deg); }
/* The stage chips (sweep 25 Oct): a phone's one-column-at-a-time picker. Not drawn from a tablet up.
   Each chip is the kit's .ui-chip (look pass, 25 Oct). */
.r2-pipeline-chips { display: none; margin: 0; padding: 0; list-style: none; }
/* The dialog stays the kit's full-screen veil; the card in the middle (the panel) is the 30rem one. */
.r2-pipeline-moves .r2-pipeline-moves-panel { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.ui-board-columns--4 { --board-cols: 4; }
.ui-board-columns--7 { --board-cols: 7; }
@container (max-width: 170px) { .r2-pipeline-town { display: none; } }
/* On a phone the title, New lead and the ellipsis share the first line, the
   find box the second, then the location, Mine | Everyone and Sales | Jobs;
   an empty column is not drawn, so the first card is not pushed below the fold. */
@media (max-width: 47.99rem) {
  .r2-pipeline-top .ui-tab { padding: 0 .625rem; font-size: .875rem; }
  .r2-pipeline-where .ui-input { max-width: 11rem; }
  .r2-pipeline-name { flex: 1 1 auto; }
  /* 27 Oct: the title and the ⋯ share the first line (its menu opens under
     it, inside the screen); New lead and New quote are the second. */
  .r2-pipeline-more { order: 1; }
  .r2-pipeline-starts { order: 2; flex-basis: 100%; justify-content: flex-start; min-width: 0; margin-left: 0; }
  .r2-pipeline-search { order: 3; flex-basis: 100%; }
  .r2-pipeline-where { order: 4; }
  .r2-pipeline-whose { order: 5; }
  .r2-pipeline-views { order: 6; }
  .ui-board-column[data-column-empty="true"] { display: none; }
}
/* Under 640px the board is the chip row and one column: the stage picked is the
   only one drawn, even when it is empty (the chip says 0). Only once the chips
   work: pipeline-tabs marks the board data-tabs-ready when it connects. With
   scripts off, or an old phone that cannot load them, there are no chips and
   the columns stack as before, so every card can still be reached. */
@media (max-width: 39.99rem) {
  #board-pipeline[data-tabs-ready] .r2-pipeline-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  #board-pipeline[data-tabs-ready] .ui-board-columns.r2-pipeline-tabs > .ui-board-column[data-active="false"] { display: none; }
  #board-pipeline[data-tabs-ready] .ui-board-columns.r2-pipeline-tabs > .ui-board-column[data-active="true"] { display: flex; }
}
@media (min-width: 48rem) {
  .ui-board-columns.ui-board-columns--fit.ui-board-columns--4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; }
}
@media (min-width: 64rem) {
  /* The look pass (25 Oct): a column is never narrower than the mockups' 204px, so a
     name never breaks mid-word; seven columns that don't fit slide sideways inside the
     board, never the page (a wide desk still shows all seven). */
  /* 27 Oct (Chase on live, 6:55: "Pipeline needs a better way to scroll
     over/view everything maybe we can do it with the mouse"): columns wide
     enough to read again; what does not fit is a drag, a wheel turn or an
     arrow away (the board's frame below), never the page. */
  .ui-board-columns.ui-board-columns--fit { grid-auto-flow: row; grid-template-columns: repeat(var(--board-cols), minmax(16rem, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; gap: .75rem; }
  .ui-board-columns--fit .ui-board-column { padding: .5rem; }
}

/* Job cards use the existing brand tokens and current facts; controls remain
   actual links, with no new client-side action or stored board state. The look
   pass (26 Oct): a job's card is the same white card as a lead's, as in the
   mockups, with no orange stripe across its top and the same size of name. */
.r2-pipeline-job-card { gap: .625rem; }
.r2-pipeline-site { display: block; margin-top: .25rem; overflow-wrap: anywhere; }
.r2-pipeline-job-update { margin-block: .375rem; padding: .625rem .75rem; border-radius: var(--radius-ui); background: var(--color-accent-soft); font-weight: 600; line-height: 1.5; }
.r2-pipeline-job-action { margin-top: .25rem; white-space: normal; }
.r2-pipeline-list td { vertical-align: top; overflow-wrap: anywhere; }
.r2-pipeline-list-customer a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 47.99rem) {
  /* A single semantic table becomes readable stacked rows on a phone. No
     second copy of a card, DOM ID or tutorial target is rendered. */
  .r2-pipeline-list, .r2-pipeline-list tbody { display: block; }
  .r2-pipeline-list thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .r2-pipeline-list tbody { display: grid; gap: .75rem; }
  .r2-pipeline-list tr { display: grid; gap: .5rem; padding: .875rem; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); }
  .r2-pipeline-list td { display: block; min-width: 0; padding: 0; }
  .r2-pipeline-list td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .125rem; color: var(--color-muted); font-size: .6875rem; font-weight: 600; }
  .r2-pipeline-list .r2-pipeline-job-action { width: 100%; }
}

/* NEXT UP ON THE PIPELINE (26 Oct brief, Part C). The amber "Next up · N"
   badge sits between the name and the card's one line. A phone's ⋯ opens the
   bottom sheet of the moves (Move to…), each refused one with its reason
   under it, where a desk has the grip. */
.r2-pipeline-next-up { margin: 0; }
.r2-pipeline-move-opt { display: flex; flex-direction: column; gap: .5rem; }
.r2-pipeline-move-opt .ui-btn { justify-content: flex-start; width: 100%; min-height: 3.25rem; }
.r2-pipeline-move-opt .ui-btn .ui-badge { margin-left: auto; }
.r2-pipeline-move-reason { margin: 0 0 .25rem; padding: 0 .25rem; font-size: .8125rem; line-height: 1.3; font-weight: 600; color: var(--color-bad-ink); }
.r2-pipeline-move-reason a { text-decoration: underline; }
.r2-pipeline-move-off { opacity: .6; }
.r2-pipeline-move-divider { margin: .25rem 0; border: 0; border-top: 1px solid var(--color-line); }
.r2-pipeline-move-now { margin: .125rem 0 0; font-size: .875rem; color: var(--color-muted); }
@media (max-width: 47.99rem) {
  /* The kit's 44px tap height, as every button on a phone. */
  .r2-pipeline-card-foot .ui-board-grip { display: none; }
}

/* THE PIPELINE HEADER IS A TITLE AND TWO BUTTONS (live critique 27 Oct):
   Pipeline on the left, New lead / New quote and the ⋯ on the right; the
   find box, the views and Mine / Everyone are rows of the ⋯'s panel. */
.r2-pipeline-name { flex: 1 1 auto; }
.r2-pipeline-starts { margin-left: auto; }
.r2-pipeline-more { margin-left: 0; }
.ui-more-menu-panel .r2-pipeline-search { width: min(18rem, calc(100vw - 8rem)); flex-wrap: nowrap; }
/* A name wraps between words and breaks inside a word only when one word is
   wider than the card. */
.ui-board-columns--fit .r2-pipeline-card { overflow-wrap: break-word; }

/* THE BOARD SCROLLS WITH THE MOUSE (Chase, 27 Oct 6:55; the prototype he was
   shown, prototypes/pipeline). From a tablet up the board is a box the
   height of the window under the band; each column scrolls down inside
   itself under a header that stays put. Its thin warm scrollbar is a strip
   pinned to the foot of the window while the board is on the screen (the
   board's own bar is hidden; the strip moves it, and follows it). The
   background, the gaps and the headers grab and pan; a card never does.
   Round arrows at the edges ride the middle of the window, say what is beyond
   them and move one column; a soft fade marks an edge with more past it
   (board_scroll_controller). On a phone the board is one column at a time
   (the chips) and the arrows sit at the bottom corners, picking the stage
   beside. */
.r2-board-frame { position: relative; min-width: 0; }
.r2-board-bar, .r2-board-nav { display: none; }
.r2-board-edge { display: flex; flex-direction: column; align-items: center; gap: .375rem; pointer-events: none; transition: opacity .18s, visibility .18s; }
.r2-board-edge[data-gone] { opacity: 0; visibility: hidden; }
.r2-board-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line-strong); background: #fff; color: var(--color-ink); box-shadow: var(--shadow-lift); cursor: pointer; pointer-events: auto; transition: border-color .15s, color .15s, transform .1s; }
.r2-board-arrow:hover { border-color: var(--color-accent-strong); color: var(--color-accent-strong); }
.r2-board-arrow:active { transform: scale(.94); }
.r2-board-arrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.r2-board-arrow svg { width: 22px; height: 22px; stroke-width: 2.2; }
.r2-board-more { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-line); background: #fff; color: var(--color-ink); box-shadow: var(--shadow-card); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.r2-board-more:empty { display: none; }
.r2-board-more { white-space: nowrap; max-width: 3.125rem; padding-inline: 5px; }
/* A card on its way: said on the card, so nobody drags it twice (night walk, 4 Nov). */
.ui-board-card[data-moving] { opacity: .6; outline: 2px dashed var(--color-line-strong); outline-offset: -2px; }
.ui-board-card[data-moving]::after { content: attr(data-moving); display: block; margin-top: .25rem; font-size: .75rem; color: var(--color-muted); }
.r2-board-frame > .ui-board-columns:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (min-width: 48rem) {
  .r2-board-frame > .ui-board-columns {
    height: max(24rem, calc(100dvh - var(--kf-sticky-top, 66px) - 15.5rem));
    grid-template-rows: minmax(0, 1fr); align-items: stretch;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 0; scroll-snap-type: none;
    scrollbar-width: none; cursor: grab;
  }
  .r2-board-frame > .ui-board-columns::-webkit-scrollbar { display: none; }
  .r2-board-frame[data-grabbing] > .ui-board-columns, .r2-board-frame[data-grabbing] > .ui-board-columns * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .r2-board-frame > .ui-board-columns .ui-board-card { cursor: pointer; }
  .r2-board-frame > .ui-board-columns .ui-board-card[draggable="true"] { cursor: grab; }
  .r2-board-frame > .ui-board-columns > .ui-board-column { min-height: 0; overflow-x: hidden; overflow-y: auto; padding-top: 0; scroll-snap-align: none; }
  .r2-board-frame > .ui-board-columns > .ui-board-column::-webkit-scrollbar { width: 8px; }
  .r2-board-frame > .ui-board-columns > .ui-board-column::-webkit-scrollbar-thumb { background: var(--color-chart-muted); border-radius: 999px; border: 2px solid #eeebe5; }
  /* The header stays over every card: its links and its dots never print through (night walk, 4 Nov). */
  .r2-board-frame > .ui-board-columns > .ui-board-column { isolation: isolate; }
  .r2-board-frame .ui-board-column-header { position: sticky; top: 0; z-index: 5; margin: 0 -.5rem; padding: .625rem .75rem .5rem; background: #eeebe5; border-bottom: 1px solid transparent; transition: border-color .15s, box-shadow .15s; }
  .r2-board-frame .ui-board-column[data-scrolled] > .ui-board-column-header { border-bottom-color: var(--color-line-strong); box-shadow: 0 6px 8px -8px rgb(31 26 20 / .35); }
  .r2-board-frame .ui-board-column.is-drop-target > .ui-board-column-header { background: var(--color-accent-soft); }
  /* The strip: the board's scrollbar at the foot of the window, 10px, warm, always drawn. */
  .r2-board-frame[data-overflows] > .r2-board-bar { position: sticky; bottom: 0; z-index: 4; display: block; height: 18px; margin-top: .25rem; padding: 4px 0; overflow-x: auto; overflow-y: hidden; background: var(--color-page); scrollbar-width: auto; }
  .r2-board-bar > div { height: 1px; }
  .r2-board-bar::-webkit-scrollbar { height: 10px; }
  .r2-board-bar::-webkit-scrollbar-track { background: var(--color-chart-track); border-radius: 999px; }
  .r2-board-bar::-webkit-scrollbar-thumb { background: var(--color-chart-muted); border-radius: 999px; border: 1px solid var(--color-chart-track); }
  .r2-board-bar::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }
  /* The arrows: a layer over the board whose two edges ride the middle of the window. */
  .r2-board-frame[data-overflows]:not([data-phone]) { padding-inline: 3.25rem; }
  .r2-board-nav { position: absolute; top: 0; left: .25rem; right: .25rem; bottom: 22px; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
  .r2-board-nav > .r2-board-edge { position: sticky; top: calc(50dvh - 1.5rem); margin-top: 2.75rem; gap: .25rem; }
  .r2-board-frame::before, .r2-board-frame::after { content: ""; position: absolute; top: 0; bottom: 22px; z-index: 2; width: 3.5rem; pointer-events: none; opacity: 0; transition: opacity .2s; }
  .r2-board-frame::before { left: 3.25rem; width: 1.5rem; background: linear-gradient(to right, var(--color-page), transparent); }
  .r2-board-frame::after { right: 3.25rem; width: 1.5rem; background: linear-gradient(to left, var(--color-page), transparent); }
  .r2-board-frame[data-off-left="true"]::before, .r2-board-frame[data-off-right="true"]::after { opacity: 1; }
}
@supports not selector(::-webkit-scrollbar) {
  @media (min-width: 48rem) {
    .r2-board-bar { scrollbar-width: thin; scrollbar-color: var(--color-chart-muted) var(--color-chart-track); }
    .r2-board-frame > .ui-board-columns > .ui-board-column { scrollbar-width: thin; scrollbar-color: var(--color-chart-muted) transparent; }
  }
}
/* A phone's one column at a time: the arrows at the bottom corners, over the
   cards while the board is on the screen. */
.r2-board-frame[data-phone] > .r2-board-bar { display: none; }
.r2-board-frame[data-phone] > .r2-board-nav { position: sticky; top: auto; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; margin-top: .5rem; pointer-events: none; }
.r2-board-frame[data-phone] .r2-board-edge { position: static; flex-direction: row; margin: 0; }
.r2-board-frame[data-phone] .r2-board-edge--next { flex-direction: row-reverse; }
@media (prefers-reduced-motion: reduce) {
  .r2-board-edge, .r2-board-arrow, .r2-board-frame::before, .r2-board-frame::after { transition: none; }
}

/* ===========================================================================
   THE COUNT CHIPS AND THE NEW LIST (Chase, 3 Nov, space-pipeline "A · Count chips + new list").
   The page opens on the columns: the title with Board | List beside it, one slim row of the call to make next and
   a count chip for each kind of waiting, then the board filling the window; the old-lead prompt and the service
   calls line sit at the foot beside Archived and Closed out.
   ======================================================================== */

/* Board | List beside the title; New lead, New quote and the ⋯ keep the right. */
.r2-pipeline-name { flex: 0 0 auto; }
.r2-pipeline-switch { order: 0; min-width: 0; }
.r2-pipeline-switch .ui-tabs { margin: 0; }
@media (max-width: 47.99rem) {
  .r2-pipeline-name { flex: 0 0 auto; }
  .r2-pipeline-more { margin-left: auto; }
}

/* The call to make next, then a chip for each kind of waiting: a bold number in the kind's colour, then the words. */
.r2-pipeline-todo { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; min-width: 0; }
.r2-pipeline-todo-go { margin-right: .25rem; max-width: 100%; }
.r2-pipeline-todo-why { display: none; }
.r2-pipeline-todo > [data-call-try-chips] { order: 9; flex: 1 0 100%; }
.r2-pipeline-flags-wrap, .r2-pipeline-flags, .r2-pipeline-flags > li { display: contents; }
.r2-pipeline-flags { margin: 0; padding: 0; list-style: none; }
.r2-pipeline-flags-arrow { display: none; }
.r2-pipeline-flag { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: 0 .8125rem; border: 1px solid var(--color-line-strong); border-radius: 999px; background: var(--color-card); font-size: .8125rem; font-weight: 600; color: var(--color-ink); white-space: nowrap; flex: none; text-decoration: none; }
.r2-pipeline-flag:hover { background: var(--color-page); }
.r2-pipeline-flag b { font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.r2-pipeline-flag--bad b { color: var(--color-bad-ink); }
.r2-pipeline-flag--warn b { color: var(--color-warn); }
.r2-pipeline-flag--accent b { color: var(--color-accent-strong); }
.r2-pipeline-flag--grey b { color: #4a433b; }
.r2-pipeline-flag[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-strong); }
.r2-pipeline-flag-x { width: .9375rem; height: .9375rem; margin-right: -.25rem; stroke-width: 2.2; color: var(--color-accent-strong); }
/* On a phone the chips slide sideways under a fade at the right edge, with an arrow that moves them along. */
@media (max-width: 47.99rem) {
  .r2-pipeline-todo-go { flex: 1 0 100%; margin-right: 0; }
  .r2-pipeline-todo-go .ui-btn { width: 100%; justify-content: center; }
  .r2-pipeline-todo-why { display: block; margin: .25rem 0 0; font-size: .875rem; color: var(--color-muted); }
  .r2-pipeline-flags-wrap { position: relative; display: block; flex: 1 0 100%; min-width: 0; }
  .r2-pipeline-flags { display: flex; gap: .375rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 2.75rem 0 0; }
  .r2-pipeline-flags::-webkit-scrollbar { display: none; }
  .r2-pipeline-flags > li { display: block; flex: none; }
  .r2-pipeline-flag { min-height: 2.75rem; }
  .r2-pipeline-flags-wrap[data-more="true"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3.5rem; pointer-events: none; background: linear-gradient(to left, var(--color-page) 35%, transparent); }
  .r2-pipeline-flags-arrow { position: absolute; z-index: 1; top: 50%; right: 0; transform: translateY(-50%); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--color-line-strong); background: var(--color-card); color: var(--color-ink); box-shadow: var(--shadow-lift); cursor: pointer; }
  .r2-pipeline-flags-arrow[hidden] { display: none; }
  .r2-pipeline-flags-arrow svg { width: 1.375rem; height: 1.375rem; stroke-width: 2.2; }
}

/* A count chip that is on keeps just those customers: a column with none is a thin strip, its count and its name turned on its side. */
@media (min-width: 64rem) {
  .ui-board-columns.ui-board-columns--fit.r2-pipeline-narrowed { display: flex; gap: .75rem; }
  .r2-pipeline-narrowed > .ui-board-column { flex: 1 1 16rem; min-width: 16rem; }
  .r2-pipeline-narrowed > .ui-board-column[data-column-strip="true"] { flex: 0 0 3.25rem; min-width: 3.25rem; }
}
.ui-board-column[data-column-strip="true"] { padding-inline: 0; align-items: center; background: #f0ede8; }
.ui-board-column[data-column-strip="true"] > .ui-board-column-header { flex-direction: column-reverse; justify-content: flex-end; gap: .625rem; margin: 0; padding: .625rem 0 0; background: transparent; }
.ui-board-column[data-column-strip="true"] .ui-board-column-title { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--color-muted); font-weight: 600; }
.ui-board-column[data-column-strip="true"] > :not(.ui-board-column-header) { display: none; }

/* One line for the town and what is next. */
.r2-pipeline-meta { margin: 0; }
.r2-pipeline-card .r2-pipeline-meta-sep { color: var(--color-muted); }

/* THE FOOT: Archived and Closed out and the pick link on the left, the quiet notes on the right. */
.r2-pipeline-foot { display: grid; gap: .5rem 1.5rem; margin-top: .25rem; }
.r2-pipeline-foot-drawers { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.r2-pipeline-foot-drawers > details { width: 100%; }
.r2-pipeline-foot-notes { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.r2-pipeline-foot-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; border-radius: var(--radius-ui); font-size: .9375rem; font-weight: 600; color: var(--color-accent-strong); }
.r2-pipeline-foot-link:hover { background: var(--color-accent-soft); }
@media (min-width: 64rem) {
  .r2-pipeline-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); align-items: start; }
  .r2-pipeline-foot-notes { align-items: flex-end; text-align: right; }
}

/* THE LIST: its tabs say their counts; Everything is a card of one-line rows; Needs you is groups of them. */
.r2-pipeline-tab-count { margin-left: .375rem; font-variant-numeric: tabular-nums; font-weight: 600; opacity: .7; }
/* Once the script runs, a form that sends itself has no button: a button's own display must not bring it back. */
[data-auto-submit-target="button"][hidden], [data-schedule-find-target="submit"][hidden] { display: none !important; }
button.ui-find-count { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.r2-pipeline-stage { display: inline-flex; align-items: center; padding: .125rem .625rem; border-radius: 999px; background: #efebe5; color: #4a433b; font-size: .8125rem; font-weight: 600; line-height: 1.375rem; white-space: nowrap; }
[data-pipeline-list] { border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); box-shadow: var(--shadow-card); }
.r2-pipeline-list thead th { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.r2-pipeline-list td { vertical-align: middle; }
.r2-pipeline-list .r2-pipeline-job-update { display: inline; margin: 0; padding: 0; background: none; font-weight: inherit; }
.r2-pipeline-list-act { white-space: nowrap; }
.r2-pipeline-list-act .r2-pipeline-job-action { margin-top: 0; white-space: nowrap; }
.r2-pipeline-list-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.r2-pipeline-list-foot .ui-btn { margin-left: auto; }
.r2-pipeline-list-foot > p { margin-right: auto; }
@media (max-width: 47.99rem) {
  .r2-pipeline-list td[data-label]::before { display: none; }
  .r2-pipeline-list tr { grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: .25rem .5rem; }
  .r2-pipeline-list td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .r2-pipeline-list td:nth-child(5) { grid-column: 2; grid-row: 1; }
  .r2-pipeline-list td:nth-child(6) { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
  .r2-pipeline-list td:nth-child(2) { grid-column: 1 / span 2; grid-row: 2; }
  .r2-pipeline-list td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .r2-pipeline-list td:nth-child(4) { grid-column: 1 / -1; grid-row: 4; text-align: left; }
  .r2-pipeline-list td:empty { display: none; }
}

.r2-pipeline-needs-box { border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: var(--color-card); box-shadow: var(--shadow-card); overflow: hidden; }
.r2-pipeline-needs-cols, .r2-pipeline-needs-row { display: grid; grid-template-columns: minmax(10rem, 1.3fr) 8.5rem minmax(10rem, 2fr) 9rem 6rem 9.5rem; gap: .25rem .75rem; align-items: center; padding: .5rem 1rem; }
.r2-pipeline-needs-cols { padding-block: .75rem; border-bottom: 1px solid var(--color-line); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.r2-pipeline-needs-cols-act { text-align: right; }
.r2-pipeline-needs-head { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .5rem; padding: .5rem 1rem; background: #f4f1ec; border-top: 1px solid var(--color-line); }
.r2-pipeline-needs-cols + .r2-pipeline-needs-group > .r2-pipeline-needs-head { border-top: 0; }
.r2-pipeline-needs-head h3 { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink); }
.r2-pipeline-needs-why { font-size: .8125rem; color: var(--color-muted); }
.r2-pipeline-needs-n { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; background: #efebe5; color: #4a433b; }
.r2-pipeline-needs-n.r2-pipeline-flag--bad { background: var(--color-bad-soft); color: var(--color-bad-ink); }
.r2-pipeline-needs-n.r2-pipeline-flag--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.r2-pipeline-needs-n.r2-pipeline-flag--accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.r2-pipeline-needs-rows { margin: 0; padding: 0; list-style: none; }
.r2-pipeline-needs-rows > li + li { border-top: 1px solid var(--color-line); }
.r2-pipeline-needs-who { min-width: 0; }
.r2-pipeline-needs-name { display: inline-flex; align-items: center; min-height: 2rem; font-weight: 600; color: var(--color-ink); }
.r2-pipeline-needs-name:hover { text-decoration: underline; }
.r2-pipeline-needs-place, .r2-pipeline-needs-what, .r2-pipeline-needs-when { margin: 0; font-size: .875rem; line-height: 1.3; color: var(--color-muted); overflow-wrap: anywhere; }
.r2-pipeline-needs-what { color: var(--color-ink); }
.r2-pipeline-needs-when { text-align: right; }
.r2-pipeline-needs-act { display: flex; justify-content: flex-end; }
.r2-pipeline-needs-row > [data-call-try-chips] { grid-column: 1 / -1; }
.r2-pipeline-needs-rep-inline, .r2-pipeline-needs-stage-inline { display: none; }
.r2-pipeline-needs-more > summary { display: flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 1rem; border-top: 1px solid var(--color-line); font-weight: 600; color: var(--color-accent-strong); cursor: pointer; list-style: none; }
.r2-pipeline-needs-more > summary::-webkit-details-marker { display: none; }
.r2-pipeline-needs-more > summary svg { width: 1rem; height: 1rem; }
.r2-pipeline-needs-more[open] > summary .r2-pipeline-more-open { display: none; }
.r2-pipeline-needs-more[open] > summary .r2-pipeline-more-close { display: inline; }
.r2-pipeline-needs-more[open] > summary svg { transform: rotate(180deg); }
@media (max-width: 63.99rem) {
  .r2-pipeline-needs-cols { display: none; }
  .r2-pipeline-needs-row { grid-template-columns: minmax(0, 1fr) auto; padding-block: .75rem; }
  .r2-pipeline-needs-who { grid-column: 1; grid-row: 1; }
  .r2-pipeline-needs-act { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .r2-pipeline-needs-what { grid-column: 1; grid-row: 2; color: var(--color-ink); }
  .r2-pipeline-needs-when { grid-column: 1; grid-row: 3; text-align: left; }
  .r2-pipeline-needs-when:empty { display: none; }
  .r2-pipeline-needs-row .r2-pipeline-stage, .r2-pipeline-needs-rep { display: none; }
  .r2-pipeline-needs-rep-inline { display: inline-block; margin-left: .375rem; vertical-align: middle; }
  .r2-pipeline-needs-stage-inline { display: inline; }
}