/* Picard Fleet Board — kanban with LCARS-tinted accents */

.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 .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;
}

.blockers {
  background: #1a0a0a; border-left: 4px solid #f33;
  padding: 6px 12px; margin: 8px 0;
}
.blockers summary { cursor: pointer; color: #f33; font-weight: bold; }
.blockers .blocker-list { list-style: none; padding: 8px 0 0; margin: 0; }
.blockers .blocker-list li { padding: 4px 0; font-size: 13px; }
.blockers .agent-tag {
  background: #333; color: #ff9c00;
  padding: 1px 6px; border-radius: 8px; font-size: 11px; margin-left: 6px;
}

.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;
}

.kanban {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
}
.column {
  background: #0f0f0f; border: 1px solid #222; border-radius: 6px;
  padding: 8px;
}
.column h3 { color: #ff9c00; margin: 0 0 8px; font-size: 14px; }
.column h3 .count { color: #888; font-weight: normal; }
.column.empty-after-filter { opacity: 0.35; }

.card {
  background: #181818; border-radius: 4px; padding: 8px;
  margin-bottom: 6px; border-left: 3px solid #555;
  font-size: 12px;
}
.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-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.priority-badge {
  font-weight: bold; font-size: 10px; padding: 1px 5px; border-radius: 3px;
  background: #000; color: #ddd;
}
.priority-badge.priority-ui { color: #f33; }
.priority-badge.priority-u  { color: #f80; }
.priority-badge.priority-i  { color: #9cf; }
.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; }

.card-title { color: #fff; line-height: 1.3; margin: 2px 0 4px; }
.card-foot { display: flex; gap: 8px; color: #888; font-size: 11px; }
.card-foot .state { color: #9cf; }

/* NOTE: Facet-driven `display: none` rules for agent / project / state / blockers
   are emitted as an inline <style> block in views/picard.ejs (Task 7), because the
   set of agents, projects, and states is data-driven. picard.css here only carries
   the static look-and-feel. */