/* Goals panel — due-dated, prioritized objectives worked autonomously */
  #goals-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #goals-stats { padding: 16px 24px 0; display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
  .goal-stat-pill {
    display: flex; align-items: baseline; gap: 5px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
    padding: 5px 12px; font-size: 11.5px; color: var(--text-dim); flex-shrink: 0;
  }
  .goal-stat-pill strong { font-size: 13px; color: var(--text); font-weight: 700; }
  .goal-stat-pill.running strong { color: var(--accent); }
  .goal-stat-pill.done strong { color: var(--green); }
  .goal-stat-pill.failed strong { color: var(--red); }
  .goal-stat-pill.cancelled strong { color: var(--text-dim); }
  #goals-toolbar { padding: 12px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
  /* Fill/shimmer/hover/typography come from holo-theme.css's shared
     primary-button treatment — same as #work-item-toolbar's. */
  #goals-toolbar button.primary { border: none; color: #070605; font-weight: 700; }
  #goals-search {
    background: var(--panel); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 6px 10px; font-size: 12px;
    width: 200px; flex-shrink: 0;
  }
  #goals-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  #goals-list { flex: 1; overflow-y: auto; padding: 12px 24px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  .goal-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    animation: list-row-in 0.28s ease both;
  }
  /* stagger the first screenful; anything further down just appears with
     everything else rather than trailing in one by one */
  #goals-list .goal-row:nth-child(1) { animation-delay: 0ms; }
  #goals-list .goal-row:nth-child(2) { animation-delay: 25ms; }
  #goals-list .goal-row:nth-child(3) { animation-delay: 50ms; }
  #goals-list .goal-row:nth-child(4) { animation-delay: 75ms; }
  #goals-list .goal-row:nth-child(5) { animation-delay: 100ms; }
  #goals-list .goal-row:nth-child(n+6) { animation-delay: 120ms; }
  @media (prefers-reduced-motion: reduce) {
    .goal-row { animation: none; }
  }
  .goal-row.running { border-color: var(--accent); }
  .goal-row.done, .goal-row.cancelled { opacity: 0.55; }
  .goal-row.failed { border-color: var(--red); }
  .goal-row .body { flex: 1; min-width: 0; }
  .goal-row .subject { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .goal-row.done .subject, .goal-row.cancelled .subject { text-decoration: line-through; }
  .goal-row .desc { font-size: 12px; color: var(--text-dim); margin-top: 4px; white-space: pre-wrap; }
  .goal-row .meta { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; opacity: 0.75; }
  .goal-overdue { color: var(--red); font-weight: 600; opacity: 1; }
  .goal-priority-badge.high { background: rgba(255,107,107,0.15); color: var(--red); }
  .goal-priority-badge.medium { background: rgba(245,184,79,0.15); color: var(--amber); }
  .goal-priority-badge.low { background: rgba(62,207,142,0.15); color: var(--green); }
  .goal-status-badge.queued { background: rgba(255,255,255,0.08); color: var(--text-dim); }
  .goal-status-badge.running { background: rgba(94,163,255,0.15); color: var(--accent); }
  .goal-status-badge.done { background: rgba(62,207,142,0.15); color: var(--green); }
  .goal-status-badge.failed { background: rgba(255,107,107,0.15); color: var(--red); }
  .goal-status-badge.cancelled { background: rgba(255,255,255,0.08); color: var(--text-dim); }
  /* Marks a goal that was auto-created needing root (see backend's
     decide_capability_request) — plain when it's just informational,
     "blocked" (pulsing amber) when it's the reason a queued goal hasn't
     started: sudo is currently locked. */
  .goal-sudo-badge { background: rgba(255,255,255,0.08); color: var(--text-dim); }
  .goal-sudo-badge .icon-svg { width: 11px; height: 11px; color: var(--text-dim); }
  .goal-sudo-badge.blocked { background: rgba(245,184,79,0.15); color: var(--amber); animation: goal-sudo-blocked-pulse 2s ease-in-out infinite; }
  .goal-sudo-badge.blocked .icon-svg { color: var(--amber); }
  @keyframes goal-sudo-blocked-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }
  @media (prefers-reduced-motion: reduce) {
    .goal-sudo-badge.blocked { animation: none; }
  }
  .goal-stat-pill.sudo-blocked { border-color: rgba(245,184,79,0.4); color: var(--amber); }
  .goal-stat-pill.sudo-blocked strong { color: var(--amber); }
  .goal-stat-pill.sudo-blocked .icon-svg { width: 12px; height: 12px; color: var(--amber); }
  .goal-row .view-workspace, .goal-row .edit, .goal-row .del, .goal-row .cancel { color: var(--text-dim); font-size: 13px; cursor: pointer; flex-shrink: 0; padding: 2px 6px; border-radius: 5px; }
  .goal-row .view-workspace:hover { color: var(--accent); }
  .goal-row .edit:hover { color: var(--text); }
  .goal-row .del:hover, .goal-row .cancel:hover { color: var(--red); }
  .goal-row .view-workspace:hover .icon-svg { color: var(--accent); filter: drop-shadow(0 0 5px rgba(62,90,76,0.5)); }
  .goal-row .edit:hover .icon-svg { color: var(--text); filter: none; }
  .goal-row .del:hover .icon-svg, .goal-row .cancel:hover .icon-svg { color: var(--red); filter: drop-shadow(0 0 5px rgba(255,107,107,0.5)); }
  #goals-empty { color: var(--text-dim); font-size: 13px; padding: 12px 24px; }

  #goal-overlay, #convert-goal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,7,10,0.72);
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  #goal-overlay.visible, #convert-goal-overlay.visible { display: flex; }
  #goal-err, #convert-goal-err { color: var(--red); font-size: 12px; margin-top: 10px; }