/* ══════════════════════════════════════════════════════════════════════════
   Pasts B — "Konveijers". A four-column board, not a mailbox.

   Cool greys and one blue: next to version A, which borrows the salon's warm
   palette, this has to be unmistakably a different instrument. Monospace on
   every number, because the counters are the point — the board exists to show
   how much went through, not to read one letter nicely.
   ══════════════════════════════════════════════════════════════════════ */

.pb{
  --bg:#EEF2F6;
  --paper:#FFF;
  --panel:#F7F9FB;
  --ink:#1B2430;
  --dim:#5D6B7C;
  --faint:#8A99AA;
  --line:rgba(27,36,48,.14);
  --line-2:rgba(27,36,48,.07);
  --blue:#2E6FB7;
  --blue-soft:rgba(46,111,183,.1);
  --ok:#1E7A52;
  --ok-soft:rgba(30,122,82,.12);
  --warn:#B5760F;
  --warn-soft:rgba(181,118,15,.14);

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
.pb *{box-sizing:border-box}
.pb p{margin:0}

.pb-note{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:120;
  display:flex;align-items:center;gap:.7rem;padding:.5rem .65rem .5rem 1.05rem;
  border-radius:2rem;background:rgba(27,36,48,.94);color:#fff;font-size:.76rem;
  font-weight:500;box-shadow:0 16px 40px -18px rgba(0,0,0,.5);transition:opacity .3s,transform .3s;
}
.pb-note button{width:1.5rem;height:1.5rem;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;font-size:.95rem;line-height:1}
.pb-note.is-gone{opacity:0;transform:translateX(-50%) translateY(1rem);pointer-events:none}

/* ── top ── */
.pb-top{display:flex;align-items:center;gap:1.6rem;padding:.75rem clamp(1rem,3vw,2rem);
  background:var(--paper);border-bottom:1px solid var(--line)}
.pb-brand{display:flex;flex-direction:column;line-height:1.25}
.pb-brand b{font-size:.95rem}
.pb-brand span{font-size:.73rem;color:var(--faint)}
.pb-meters{display:flex;gap:1.4rem;margin-left:1rem;flex-wrap:wrap}
.pb-meter{display:flex;flex-direction:column;line-height:1.15}
.pb-meter b{font-family:var(--mono);font-size:1.15rem;font-variant-numeric:tabular-nums}
.pb-meter span{font-size:.7rem;color:var(--faint)}
.pb-meter.ok b{color:var(--ok)}
.pb-meter.warn b{color:var(--warn)}
.pb-back{margin-left:auto;font-size:.82rem;color:var(--dim);text-decoration:none}
.pb-back:hover{color:var(--blue)}

/* ── controls ── */
.pb-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding:.9rem clamp(1rem,3vw,2rem) .3rem}
.pb-day{font-size:.84rem;color:var(--dim);margin-right:.4rem}
.pb-run{padding:.55rem 1.15rem;border-radius:8px;border:1px solid var(--blue);
  background:var(--blue);color:#fff;font-family:inherit;font-size:.85rem;font-weight:650;cursor:pointer}
.pb-run:hover{filter:brightness(1.08)}
.pb-run:disabled{opacity:.5;cursor:default;filter:none}
.pb-ghost{padding:.55rem 1rem;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--dim);font-family:inherit;font-size:.82rem;cursor:pointer}
.pb-ghost:hover{border-color:var(--ink);color:var(--ink)}
.pb-legend{margin-left:auto;display:flex;align-items:center;gap:.4rem;
  font-size:.75rem;color:var(--faint)}
.pb-legend .k{width:.55rem;height:.55rem;border-radius:2px;display:inline-block;margin-left:.6rem}
.pb-legend .k.auto{background:var(--ok)}
.pb-legend .k.stop{background:var(--warn)}

/* ── board ── */
.pb-board{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;
  padding:.9rem clamp(1rem,3vw,2rem) 4rem;max-width:110rem;margin-inline:auto;align-items:start}
.pb-col{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  padding:.7rem;min-height:9rem}
.pb-col-h{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding:.2rem .3rem .7rem}
.pb-col-h b{font-size:.83rem;font-weight:650}
.pb-col-h i{font-style:normal;font-family:var(--mono);font-size:.78rem;color:var(--faint)}
.pb-col-note{font-size:.72rem;color:var(--faint);padding:0 .3rem .6rem;line-height:1.4}
.pb-stack{display:flex;flex-direction:column;gap:.45rem}

.pb-card{
  width:100%;text-align:left;background:var(--paper);border:1px solid var(--line-2);
  border-left:3px solid var(--blue);border-radius:9px;padding:.6rem .7rem;
  font-family:inherit;color:var(--ink);cursor:pointer;
  animation:pb-drop .34s cubic-bezier(.22,.61,.36,1);
}
.pb-card:hover{border-color:var(--blue);box-shadow:0 8px 20px -12px rgba(27,36,48,.5)}
.pb-card.auto{border-left-color:var(--ok)}
.pb-card.stop{border-left-color:var(--warn)}
.pb-card.mute{border-left-color:var(--faint);opacity:.75}
@keyframes pb-drop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.pb-c-top{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline}
.pb-c-top b{font-size:.82rem;font-weight:650}
.pb-c-top span{font-family:var(--mono);font-size:.71rem;color:var(--faint);flex:none}
.pb-c-sub{font-size:.79rem;color:var(--dim);margin-top:.1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pb-c-tag{display:inline-block;margin-top:.4rem;padding:.1rem .45rem;border-radius:2rem;
  font-size:.68rem;font-weight:650;background:var(--blue-soft);color:var(--blue)}
.pb-c-out{display:inline-block;margin-top:.4rem;padding:.1rem .45rem;border-radius:2rem;
  font-size:.68rem;font-weight:650}
.pb-c-out.ok{background:var(--ok-soft);color:var(--ok)}
.pb-c-out.warn{background:var(--warn-soft);color:var(--warn)}
.pb-c-out.mute{background:rgba(27,36,48,.06);color:var(--faint)}
.pb-empty{padding:1.4rem .4rem;text-align:center;color:var(--faint);font-size:.78rem}

/* ── drawer ── */
.pb-scrim{position:fixed;inset:0;background:rgba(27,36,48,.4);z-index:100;animation:pb-fade .2s ease}
@keyframes pb-fade{from{opacity:0}to{opacity:1}}
.pb-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(38rem,100%);z-index:110;
  background:var(--paper);border-left:1px solid var(--line);overflow-y:auto;
  padding:clamp(1.2rem,3vw,2rem);animation:pb-slide .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes pb-slide{from{transform:translateX(100%)}to{transform:none}}
.pb-drawer-x{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:1.1rem;
  line-height:1;color:var(--dim)}
.pb-drawer-x:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.pb-d-head{padding-right:2.5rem;margin-bottom:1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line-2)}
.pb-d-head h2{margin:0 0 .3rem;font-size:1.15rem;font-weight:650}
.pb-d-meta{font-size:.82rem;color:var(--dim)}
.pb-steps{display:flex;gap:.3rem;margin-bottom:1.2rem;flex-wrap:wrap}
.pb-step{flex:1;min-width:5rem;padding:.5rem .55rem;border-radius:8px;background:var(--panel);
  border:1px solid var(--line-2);font-size:.72rem;color:var(--faint)}
.pb-step.done{background:var(--ok-soft);border-color:rgba(30,122,82,.25);color:var(--ok);font-weight:650}
.pb-step.stop{background:var(--warn-soft);border-color:rgba(181,118,15,.3);color:var(--warn);font-weight:650}
.pb-d-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:1.2rem 0 .5rem}
.pb-d-box{background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  padding:.95rem 1.05rem;font-size:.9rem;white-space:pre-wrap}
.pb-d-box.draft{background:var(--paper);border-color:var(--blue)}
.pb-d-none{color:var(--faint);font-size:.86rem}

@media (prefers-reduced-motion:reduce){
  .pb-card,.pb-drawer,.pb-scrim{animation:none}
}
@media (max-width:72rem){
  .pb-board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:44rem){
  .pb-board{grid-template-columns:1fr}
  .pb-meters{display:none}
  .pb-legend{margin-left:0;flex-basis:100%}
}