/* Tasks Board v2 — two-zone layout */

.picard-board {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #ddd;
  background: #0a0a0a;
  padding: 12px 16px;
  min-height: 100vh;
}

.picard-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}
.picard-header h1 { color: #ff9c00; margin: 0; font-size: 22px; }
.picard-header .meta { color: #888; font-size: 12px; flex: 1; }
.picard-header .done-counter {
  color: #6c6; margin-left: 8px;
  background: #0a1a0a; padding: 1px 8px; border-radius: 10px;
}
.picard-header .refresh button {
  background: #ff9c00; color: #000; border: none;
  padding: 6px 14px; font-weight: bold; cursor: pointer; border-radius: 12px;
}

.banner.partial-data {
  background: #2a1c00; color: #ffb000;
  border-left: 4px solid #ff9c00; padding: 8px 12px; margin: 8px 0;
}

.facet-bar {
  display: flex; gap: 12px; flex-wrap: wrap;
  background: #111; padding: 8px 12px; border-radius: 6px; margin: 8px 0;
}
.facet-bar fieldset {
  border: 1px solid #333; padding: 4px 8px; margin: 0;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.facet-bar legend { color: #ff9c00; font-size: 11px; padding: 0 4px; }
.facet-bar label { font-size: 12px; color: #ccc; }

.empty-hint {
  background: #1a1208; color: #ffb000;
  padding: 8px 12px; margin: 8px 0; border-left: 4px solid #ff9c00;
}

/* Zones */
.zone-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.zone-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top-zone lanes */
.lane {
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 8px;
  min-height: 80px;
}
.lane-waiting  { border-top: 3px solid #f33; }
.lane-due-soon { border-top: 3px solid #f80; }
.lane-holding  { border-top: 3px solid #9cf; }

.lane-head, .row-head {
  margin: 0 0 8px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lane-waiting  .lane-head { color: #f33; }
.lane-due-soon .lane-head { color: #f80; }
.lane-holding  .lane-head { color: #9cf; }

.lane-head .count, .row-head .count { color: #888; font-weight: normal; }

.lane.drop-target {
  outline: 2px dashed #9cf;
  outline-offset: -4px;
}

.holding-empty {
  color: #666;
  font-size: 11px;
  font-style: italic;
  margin: 4px 0 0;
}
.lane-holding:has(.card) .holding-empty {
  display: none;
}

/* Bottom-zone rows */
.row {
  background: #0f0f0f;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 8px;
}
.row-do-now       { border-top: 3px solid #f33; }
.row-this-week    { border-top: 3px solid #f80; }
.row-when-you-can { border-top: 3px solid #555; }

.row-do-now       .row-head { color: #f33; }
.row-this-week    .row-head { color: #f80; }
.row-when-you-can .row-head { color: #999; }

.row-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.lane-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Cards */
.card {
  background: #181818;
  border-radius: 4px;
  padding: 8px;
  border-left: 3px solid #555;
  font-size: 12px;
  cursor: grab;
}
.card:active { cursor: grabbing; }
.card.eisenhower-ui { border-left-color: #f33; background: #1a0a0a; }
.card.eisenhower-u  { border-left-color: #f80; background: #1a1208; }
.card.eisenhower-i  { border-left-color: #9cf; }
.card.eisenhower-neither { border-left-color: #555; }

.card.is-dragging { opacity: 0.4; }

.card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.card-id { color: #ddd; text-decoration: none; flex: 1; font-family: monospace; }
.card-id:hover { text-decoration: underline; }

.stale-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: transparent;
}
.stale-dot.stale-orange { background: #f80; }
.stale-dot.stale-red    { background: #f33; }

.blocker-badge { font-size: 12px; }

.unpin-btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.unpin-btn:hover { color: #f33; }

.card-title { color: #fff; line-height: 1.3; margin: 2px 0 4px; }
.card-foot { display: flex; gap: 8px; align-items: center; color: #888; font-size: 11px; flex-wrap: wrap; }
.card-foot .state-chip {
  background: #222; color: #9cf;
  padding: 1px 6px; border-radius: 8px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.card-foot .state-chip.state-In_Progress { background: #0a1a2a; color: #9cf; }
.card-foot .state-chip.state-Blocked     { background: #1a0a0a; color: #f99; }
.card-foot .state-chip.state-Backlog,
.card-foot .state-chip.state-Todo        { background: #1a1a1a; color: #ccc; }
.card-foot .due { color: #ffb000; }

/* "+N more" disclosure */
.more-toggle {
  background: transparent;
  border: 1px dashed #444;
  color: #888;
  padding: 4px 10px;
  margin-top: 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  width: 100%;
}
.more-toggle:hover { color: #ff9c00; border-color: #ff9c00; }

/* Mark-done */
.mark-done-cb {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #4c4;
}
.card.is-marking-done {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.card.is-marking-done .card-title {
  text-decoration: line-through;
  color: #888;
}
@keyframes slideOut {
  to { opacity: 0; max-height: 0; margin: 0; padding: 0; overflow: hidden; }
}
.card.done-animate-out {
  animation: slideOut 0.35s ease forwards;
}
.mark-done-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #c33;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.mark-done-toast.fade-out { opacity: 0; }