/* ============================================================
   Pipezoom - css/leadpipe.css, the Pipeline view of the Leads page.

   The board of includes/leadpipe.php: 7 columns in stage order, each with its heading, its count, its line and its
   cards, and the strip of stage presses over it. The layout is by the board's own width: from 1100 px the 7 columns
   share it; under 1100 px each column is 240 px wide and the board scrolls sideways; under 700 px each column is a
   full-width section down the page. js/leadpipe.js sets the board's height from 700 px. Defines the classes under
   .lpipe.
   Notes: docs/notes/app.pipezoom.com/css/leadpipe.css.md
   ============================================================ */

.lpipe{container:lpipe / inline-size;margin:0 0 16px;}
.lpipe-err{margin:0;}

/* The strip of stage presses, drawn under 1100 px of board by the 2 container rules at the end. */
.lpipe-jump{display:none;flex-wrap:nowrap;gap:6px;margin:0 0 10px;overflow-x:auto;scrollbar-width:none;}
.lpipe-jump::-webkit-scrollbar{display:none;}
.lpipe-go{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;
  background:var(--surface-high);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  color:var(--ink);font-size:.8rem;font-weight:600;white-space:nowrap;cursor:pointer;
}
.lpipe-go:hover{background:var(--surface-hover);}
.lpipe-go b{color:var(--ink-soft);font-variant-numeric:tabular-nums;}

/* The board: a row of headings as tall as the tallest one, then a row of cards to the board's bottom; each column
   spans both rows as a subgrid, and its list of cards scrolls on its own. The height is 70 percent of the window
   until js/leadpipe.js sets it. */
.lpipe-board{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);gap:0 8px;
  height:70vh;min-height:360px;
  overflow-x:auto;overscroll-behavior-x:contain;
}
.lpipe-col{
  display:grid;grid-row:span 2;grid-template-rows:subgrid;min-width:0;min-height:0;
  background:var(--surface-high);
  border:1px solid var(--line);border-radius:var(--radius);
}
.lpipe-head{padding:10px 10px 9px;border-bottom:1px solid var(--line);}
/* Under .lpipe: the page's h2 rules (css/base.css, css/components.css) set a top margin and an icon margin. */
.lpipe .lpipe-t{
  display:flex;align-items:center;gap:7px;margin:0;padding:0;
  font-size:.9rem;font-weight:700;letter-spacing:0;line-height:1.25;color:var(--ink);
}
.lpipe .lpipe-t i{flex:none;margin:0;font-size:.8rem;color:var(--ink-faint);}
.lpipe-t span{min-width:0;overflow-wrap:anywhere;}
.lpipe-n{
  flex:none;margin-left:auto;min-width:26px;padding:2px 8px;
  background:var(--surface-raised);
  border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--ink);font-size:.78rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;
}
.lpipe-rule{margin:5px 0 0;font-size:.75rem;line-height:1.35;color:var(--ink-soft);}

.lpipe-cards{
  min-height:0;overflow-y:auto;overscroll-behavior-y:contain;
  display:flex;flex-direction:column;gap:8px;
  margin:0;padding:8px;list-style:none;
}
.lpipe-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:9px 10px;
  background:var(--surface-raised);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.8rem;line-height:1.35;color:var(--ink-soft);
}
.lpipe-card > *{max-width:100%;overflow-wrap:anywhere;}
.lpipe-name{font-size:.86rem;font-weight:700;color:var(--ink);}
.lpipe-line{color:var(--ink);}
.lpipe-open{margin-top:6px;}
.lpipe-none{align-self:start;margin:0;padding:12px 10px;font-size:.8rem;color:var(--ink-faint);}

/* Under 1100 px of board: 240 px columns, the board scrolls sideways and a column's left edge snaps to the board's. */
@container lpipe (max-width:1099px){
  .lpipe-jump:not([hidden]){display:flex;}
  .lpipe-board{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:240px;scroll-snap-type:x proximity;}
  .lpipe-col{scroll-snap-align:start;}
}
/* Under 700 px of board: the sections run down the page at their own height, and the strip sticks under the crumb
   row with the page's background. Pressing a stage scrolls its section to just under the strip. */
@container lpipe (max-width:699px){
  .lpipe-jump:not([hidden]){
    position:sticky;top:var(--lds-stick);z-index:40;
    margin:0 0 10px;padding:8px 0;
    background:var(--surface-page);
  }
  .lpipe-board{display:block;height:auto;min-height:0;overflow:visible;}
  .lpipe-col{display:block;margin:0 0 12px;scroll-margin-top:calc(var(--lds-stick) + 52px);}
  .lpipe-cards{overflow:visible;}
}