/* =========================================================================
   PLANNING BOARD — sort-the-thought whiteboard (zones + draggable prompt
   bubbles). Themed with the app's design tokens; bubble accent colors reuse
   the same hex set as the Maps tool's mc-1..mc-6 so the two whiteboard-style
   tools read as one family.
   ========================================================================= */

#planningBoardPanel{
  grid-column:1;grid-row:3;
  display:none;flex-direction:column;min-height:0;overflow:hidden;
  background:var(--bg);
}
#planningBoardPanel.visible{ display:flex; }

/* ---- Top bar ---- */
.pboard-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px 14px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.pboard-topbar h2{
  margin:0;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);
}
.pboard-topbar .pboard-sub{ margin-top:3px;font-size:var(--fs-small);color:var(--faint); }
.pboard-top-actions{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end; }

.pboard-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 13px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.pboard-btn svg{ width:13px;height:13px; }
.pboard-btn:hover{ color:var(--text);border-color:var(--line-bright); }
.pboard-btn.primary{ background:var(--accent);border-color:var(--accent);color:var(--bg); }
.pboard-btn.primary:hover{ opacity:.85; }
.pboard-btn.danger:hover{ color:var(--danger);border-color:var(--danger); }

/* ---- Board ---- */
.pboard-board-wrap{
  min-height:0;flex:1;padding:16px;overflow:auto;
  background:
    linear-gradient(rgba(var(--text-rgb),.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--text-rgb),.018) 1px, transparent 1px);
  background-size:22px 22px;
}
.pboard-board{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;height:100%;
}
.pboard-zone{
  position:relative;flex:1 1 260px;min-width:240px;align-self:stretch;
  background:var(--card);border:1px solid var(--line);overflow:hidden;
}
.pboard-zone.drop-target{ border-color:var(--accent2);box-shadow:0 0 0 2px rgba(var(--accent2-rgb),.25) inset; }

.pboard-zone-head{
  position:absolute;top:0;left:0;right:0;z-index:1;
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;background:var(--card-2);border-bottom:1px solid var(--line);
}
.pboard-zone-title{
  flex:1;min-width:0;color:var(--text);font-size:12.5px;font-weight:700;outline:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pboard-zone-title:focus{ white-space:normal;text-overflow:initial; }
.pboard-zone-del{
  flex:0 0 auto;width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;color:var(--faint);cursor:pointer;font-size:13px;line-height:1;
  opacity:0;transition:opacity .12s,color .12s,border-color .12s;
}
.pboard-zone:hover .pboard-zone-del{ opacity:1; }
.pboard-zone-del:hover{ color:var(--danger);border-color:var(--danger); }

.pboard-zone-add{
  flex:0 0 auto;align-self:stretch;min-width:64px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:transparent;border:1px dashed var(--line);color:var(--faint);cursor:pointer;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  transition:color .15s,border-color .15s;
}
.pboard-zone-add svg{ width:16px;height:16px; }
.pboard-zone-add:hover{ color:var(--text);border-color:var(--line-bright); }

/* ---- Bubbles ---- */
.pboard-bubble{
  position:absolute;left:var(--x);top:var(--y);width:168px;min-height:36px;
  background:var(--card-2);border:1px solid var(--line);border-left:3px solid var(--faint);
  cursor:grab;user-select:none;touch-action:none;overflow:visible;
}
.pboard-bubble:hover,.pboard-bubble:focus-within{
  border-color:var(--line-bright);box-shadow:var(--sh-1);
}
.pboard-bubble.dragging{
  z-index:40;opacity:.94;cursor:grabbing;box-shadow:var(--sh-2);
}
.pboard-bubble[data-group="actions"]{ border-left-color:var(--warn); }
.pboard-bubble[data-group="projects"]{ border-left-color:var(--accent); }
.pboard-bubble[data-group="waiting"]{ border-left-color:var(--accent-2); }
.pboard-bubble[data-group="someday"]{ border-left-color:var(--danger-soft); }
.pboard-bubble[data-group="sweep"]{ border-left-color:var(--good); }
.pboard-bubble[data-group="areas"]{ border-left-color:var(--accent2); }
.pboard-bubble[data-group="blank"]{ border-left-color:var(--faint); }

.pboard-bubble-del{
  position:absolute;top:-7px;right:-7px;z-index:2;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--faint);background:var(--card);border:1px solid var(--line);
  cursor:pointer;font-size:12px;line-height:1;opacity:0;
  transition:opacity .12s,color .12s,background .12s;
}
.pboard-bubble:hover .pboard-bubble-del,.pboard-bubble:focus-within .pboard-bubble-del{ opacity:1; }
.pboard-bubble-del:hover{ color:#fff;background:var(--danger); }

.pboard-bubble-text{
  min-height:34px;padding:8px 20px 8px 9px;color:var(--text);outline:none;
  font-size:12px;font-weight:600;line-height:1.3;user-select:text;overflow-wrap:anywhere;
}
.pboard-bubble-text:focus{ background:rgba(var(--accent-rgb),.05); }

/* ---- Palette ---- */
.pboard-palette{
  min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--panel);border-top:1px solid var(--line);flex:0 0 230px;
}
.pboard-palette-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);
}
.pboard-palette-title{
  display:flex;align-items:baseline;gap:8px;min-width:0;
  color:var(--text);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.pboard-palette-title span{
  color:var(--faint);font-size:var(--fs-small);font-weight:500;text-transform:none;letter-spacing:0;
}
.pboard-search{
  width:220px;background:var(--card);border:1px solid var(--line);color:var(--text);
  font-size:12px;padding:6px 10px;outline:none;
}
.pboard-search::placeholder{ color:var(--faint); }
.pboard-search:focus{ border-color:var(--line-bright); }

.pboard-groups{
  min-height:0;display:flex;gap:8px;padding:10px 16px 14px;overflow-x:auto;overflow-y:hidden;
}
.pboard-group{
  width:188px;min-width:188px;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--card);border:1px solid var(--line);overflow:hidden;
}
.pboard-group h2{
  margin:0;padding:8px 9px;color:var(--text);background:var(--card-2);border-bottom:1px solid var(--line);
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pboard-prompts{
  align-content:start;display:flex;flex-wrap:wrap;gap:5px;min-height:0;padding:8px;overflow-y:auto;
}
.pboard-prompt{
  max-width:100%;background:var(--card-2);border:1px solid var(--line);color:var(--muted);
  padding:5px 8px;cursor:pointer;font-size:11px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pboard-prompt:hover{ color:var(--text);border-color:var(--line-bright);background:var(--card-hover); }
.pboard-prompt.hidden{ display:none; }
.pboard-group.empty{ display:none; }

/* ---- Toast ---- */
.pboard-toast{
  position:fixed;right:18px;bottom:18px;z-index:100;pointer-events:none;
  transform:translateY(10px);opacity:0;padding:9px 13px;
  color:var(--text);background:var(--panel-2);border:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  transition:opacity .14s ease,transform .14s ease;box-shadow:var(--sh-2);
}
.pboard-toast.show{ opacity:1;transform:translateY(0); }

@media (max-width:1180px){
  .pboard-groups{ gap:6px; }
  .pboard-group{ width:168px;min-width:168px; }
}
@media (max-width:860px){
  .pboard-topbar,.pboard-palette-head{ align-items:flex-start;flex-direction:column; }
  .pboard-top-actions,.pboard-palette-controls{ justify-content:flex-start; }
  .pboard-board{ flex-direction:column; }
  .pboard-zone{ min-height:280px; }
  .pboard-search{ width:min(100%,260px); }
}