/* Hypha · JV partner · document: somebody else's pipeline board, in the generic look of a sales board: columns New,
   Contacted, Meeting, Proposal; every card titled Lead on its own row, a temperature tag and an owner's grey picture under it. One card is
   "Your business" (page 01: it lifts off the board).

   <article class="doc board">
     <header class="bd-top"><b>Pipeline</b><span class="bd-v">Board</span></header>
     <div class="bd-cols">
       <section class="bd-col"><h4>New</h4>
         <div class="bd-card"><b>Lead</b><span class="bd-t t-hot">Hot</span><i class="av xs"></i></div> …</section> …
     </div>
   </article>
   The lifting card is a separate .sheet the scene places over its slot (.bd-slot keeps the gap it leaves). */

.board {
  --w: 660px;
  width: var(--w);
  --f-app: var(--f-sys);
  font-family: var(--f-app, var(--f-sheet));
  color: #1f1f1f;
  background: #f4f5f7;
  border-radius: 10px;
}
.bd-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #e2e4e8; }
.bd-top b { flex: 1; font-size: 16px; font-weight: 600; }
.bd-v { padding: 3px 10px; border-radius: 6px; background: #eef0f3; font-size: 12.5px; color: #44546f; }
.bd-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; }
.bd-col h4 { margin: 2px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5e6c84; }
.bd-card, .bd-slot { display: flex; flex-wrap: wrap; align-content: center; align-items: center; column-gap: 8px; row-gap: 5px; height: 58px; margin-bottom: 8px; padding: 0 10px; border-radius: 7px; }
.bd-card { background: #fff; box-shadow: 0 1px 2px rgb(9 30 66 / 0.18); font-size: 14px; }
.bd-card b { flex: 1 0 100%; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-slot { border: 1.5px dashed #c1c7d0; }
.bd-t { flex: none; padding: 1px 7px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 17px; }
.t-hot { background: #ffebe6; color: #ae2a19; }
.t-warm { background: #fff4e5; color: #974f0c; }
.t-cold { background: #e9f2ff; color: #0c66e4; }
.bd-card .av { margin-left: auto; }
.bd-you b { font-weight: 700; }
@media (max-width: 899px) {
  .board { --w: min(354px, calc(100vw - 28px)); }
  .bd-top { padding: 9px 12px; }
  .bd-top b { font-size: 14.5px; }
  .bd-cols { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
  .bd-col.bd-4 { display: none; }
  .bd-col h4 { font-size: 12px; margin: 2px 2px 6px; }
  .bd-card, .bd-slot { height: 50px; padding: 0 7px; column-gap: 5px; row-gap: 3px; margin-bottom: 6px; }
  .bd-card { font-size: 12.5px; }
  .bd-card .av { display: none; }
  .bd-t { font-size: 12px; padding: 0 4px; }
}