/* ============================================================================
   ATLAS REDESIGN — Board component (shared by Tasks + Pipeline)  ·  Phase 1
   Branch: atlas-redesign-2026-06-29

   Reusable kanban board. Consumed by js/redesign/screens/tasks.js + pipeline.js.
   All colors come from --r-* tokens → works in Calm + Operator automatically.
   Markup contract (build exactly this structure in the screen modules):

   <div class="rd-board">
     <div class="rd-col" style="--col-accent:#…">
       <div class="rd-col-head">
         <span class="rd-col-dot"></span>
         <span class="rd-col-title">To do</span>
         <span class="rd-col-count">3</span>
         <button class="rd-col-add">+</button>
         <button class="rd-col-menu">⋯</button>
       </div>
       <div class="rd-col-body">
         <article class="rd-card" draggable="true" data-prio="high">
           <span class="rd-card-edge"></span>
           <div class="rd-card-top"><span class="rd-card-tag">218 Magnolia</span><span class="rd-card-ai">✦ AI</span><span class="rd-card-grip">⋮⋮</span></div>
           <div class="rd-card-title">Send counteroffer response</div>
           <div class="rd-card-meta"><span class="rd-meta-sub">1/3</span><span class="rd-meta-cmt">2</span></div>
           <div class="rd-card-foot"><span class="rd-due" data-tone="alert">4 PM</span><button class="rd-advance">→</button><span class="rd-avatar">BB</span></div>
         </article>
         <button class="rd-col-addtask">+ Add task</button>
       </div>
     </div>
     <button class="rd-board-addgroup">+ Add group</button>
   </div>
   ========================================================================== */

.rd-board {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 2px 12px;
  font-family: var(--r-font-body);
}

/* ---- column ---- */
.rd-col {
  flex: 0 0 300px;
  max-width: 320px;
  background: var(--r-well);
  border: 1px solid var(--r-hairline-2);
  border-radius: var(--r-radius-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--r-hairline);
  position: relative;
}
.rd-col-head::before {            /* colored top accent bar */
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: -10px;
  height: 3px; border-radius: 3px;
  background: var(--col-accent, var(--r-primary));
}
.rd-col-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--col-accent, var(--r-primary)); flex: none; }
.rd-col-title { font-weight: 600; color: var(--r-ink); font-size: 13.5px; }
.rd-col-count {
  font-family: var(--r-font-mono); font-size: 12px; color: var(--r-muted);
  background: var(--r-surface); border: 1px solid var(--r-border);
  border-radius: var(--r-radius-pill); padding: 1px 7px;
}
.rd-col-add, .rd-col-menu {
  margin-left: auto; border: 0; background: transparent; color: var(--r-faint);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.rd-col-menu { margin-left: 0; }
.rd-col-add:hover, .rd-col-menu:hover { background: var(--r-surface); color: var(--r-ink); }
.rd-col-body { display: flex; flex-direction: column; gap: 9px; min-height: 24px; }

/* ---- card ---- */
.rd-card {
  position: relative;
  background: var(--r-surface);
  border: 1px solid var(--r-hairline-2);
  border-radius: var(--r-radius-control);
  padding: 11px 12px 11px 15px;
  box-shadow: var(--r-shadow-card);
  cursor: grab;
  transition: transform var(--r-dur) var(--r-ease), box-shadow var(--r-dur) var(--r-ease), border-color var(--r-dur) var(--r-ease);
}
.rd-card:hover { transform: translateY(-1px); box-shadow: var(--r-shadow-hover); }
.rd-card.rd-dragging { opacity: .55; }
.rd-card-edge {                    /* priority edge-strip */
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--r-prio-low);
}
.rd-card[data-prio="high"] .rd-card-edge { background: var(--r-prio-high); }
.rd-card[data-prio="med"]  .rd-card-edge { background: var(--r-prio-med); }
.rd-card[data-prio="low"]  .rd-card-edge { background: var(--r-prio-low); }

.rd-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.rd-card-tag {
  font-family: var(--r-font-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--r-muted); text-transform: uppercase;
}
.rd-card-ai {
  font-family: var(--r-font-mono); font-size: 9.5px; letter-spacing: .05em;
  color: var(--r-primary); background: var(--r-mint-surface);
  border-radius: var(--r-radius-pill); padding: 1px 6px;
}
.rd-card-grip { margin-left: auto; color: var(--r-faint); font-size: 12px; cursor: grab; letter-spacing: -2px; }
.rd-card-title { color: var(--r-ink); font-size: 14px; font-weight: 500; line-height: 1.3; }
.rd-card-meta { display: flex; gap: 12px; margin-top: 7px; font-family: var(--r-font-mono); font-size: 12px; color: var(--r-muted); }
.rd-meta-sub::before { content: "☑ "; opacity: .7; }
.rd-meta-cmt::before { content: "💬 "; font-size: 10px; }

.rd-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.rd-due {
  font-family: var(--r-font-mono); font-size: 12px; padding: 2px 8px;
  border-radius: var(--r-radius-pill); background: var(--r-well); color: var(--r-muted);
}
.rd-due[data-tone="alert"]  { background: color-mix(in srgb, var(--r-alert) 16%, transparent); color: var(--r-alert); }
.rd-due[data-tone="warn"]   { background: color-mix(in srgb, var(--r-amber) 18%, transparent); color: var(--r-amber); }
.rd-due[data-tone="good"]   { background: var(--r-mint-surface); color: var(--r-mint-ink); }
.rd-advance {
  margin-left: auto; border: 1px solid var(--r-border); background: var(--r-surface);
  color: var(--r-muted); width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rd-advance:hover { background: var(--r-primary); color: var(--r-primary-ink); border-color: var(--r-primary); }
.rd-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--r-font-mono); font-size: 10px; font-weight: 600;
  background: var(--r-mint-surface); color: var(--r-mint-ink);
  box-shadow: 0 0 0 2px var(--r-surface);
}

/* ---- add affordances ---- */
.rd-col-addtask, .rd-board-addgroup {
  border: 1px dashed var(--r-border); background: transparent; color: var(--r-muted);
  border-radius: var(--r-radius-control); padding: 8px; cursor: pointer; font-family: var(--r-font-body);
  font-size: 12.5px; transition: background var(--r-dur) var(--r-ease), color var(--r-dur) var(--r-ease);
}
.rd-col-addtask:hover, .rd-board-addgroup:hover { background: var(--r-surface); color: var(--r-ink); }
.rd-board-addgroup { flex: 0 0 220px; align-self: stretch; min-height: 120px; }

/* ---- drop zone highlight (set .rd-drop on the active column body) ---- */
.rd-col-body.rd-drop { outline: 2px dashed var(--r-primary); outline-offset: 3px; border-radius: var(--r-radius-control); }

/* ============================================================================
   W-F5S1 Stage 1 additions — shared Board component (js/redesign/components/
   board.js): ghost columns (honest count-only stages) + column meta chip.
   ========================================================================== */
.rd-col-meta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--r-font-mono); font-size: 12px; color: var(--r-muted);
}
.rd-col--ghost .rd-col-body { opacity: 0.88; }
.rd-col-ghostnote {
  border: 1px dashed var(--r-border); border-radius: var(--r-radius-card);
  padding: 14px 12px; font-size: 12.5px; line-height: 1.5; color: var(--r-muted);
  background: color-mix(in srgb, var(--r-canvas-raised) 60%, transparent);
}
.rd-col-ghostnote strong {
  display: block; font-family: var(--r-font-mono); font-size: 20px;
  color: var(--r-ink); margin-bottom: 4px;
}