/* Work Items panel — manually-tracked bugs/features/fixes */
  #work-item-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  #work-item-stats { padding: 16px 24px 0; display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
  .work-item-stat-pill {
    display: flex; align-items: baseline; gap: 5px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
    padding: 4px 10px; font-size: 11px; color: var(--text-dim); flex-shrink: 0;
  }
  .work-item-stat-pill strong { font-size: 12.5px; color: var(--text); font-weight: 700; }
  .work-item-stat-pill.bug strong { color: var(--red); }
  .work-item-stat-pill.feature strong { color: var(--green); }
  .work-item-stat-pill.fix strong { color: var(--amber); }
  .work-item-stat-pill.open strong { color: var(--text-dim); }
  .work-item-stat-pill.in-progress strong { color: var(--accent); }
  .work-item-stat-pill.in-review strong { color: var(--accent-2); }
  .work-item-stat-pill.pending strong { color: var(--amber); }
  .work-item-stat-pill.done strong { color: var(--green); }
  #work-item-progress { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 8px; }
  #work-item-progress .bar { flex: 1; height: 6px; border-radius: 4px; background: var(--panel); border: 1px solid var(--border); overflow: hidden; }
  #work-item-progress .bar .fill { height: 100%; background: var(--green); border-radius: 4px; }
  #work-item-progress .pct { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
  #work-item-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 selector list as #main-toolbar
     button.primary right above it), so this doesn't read as a plain
     flat button next to New Workspace. */
  #work-item-toolbar button.primary { border: none; color: #070605; font-weight: 700; }
  #work-item-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;
  }
  #work-item-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  #work-item-status-filter { flex-shrink: 0; }
  .work-item-kind-filter { display: flex; gap: 5px; }
  .work-item-kind-filter .work-item-kind-badge { cursor: pointer; border: 1px solid transparent; opacity: 0.4; }
  .work-item-kind-filter .work-item-kind-badge.active { opacity: 1; border-color: currentColor; }
  #work-item-sort { flex-shrink: 0; }
  #work-item-list { flex: 1; overflow-y: auto; padding: 12px 24px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
  #work-item-list .work-item-row:nth-child(1) { animation-delay: 0ms; }
  #work-item-list .work-item-row:nth-child(2) { animation-delay: 25ms; }
  #work-item-list .work-item-row:nth-child(3) { animation-delay: 50ms; }
  #work-item-list .work-item-row:nth-child(4) { animation-delay: 75ms; }
  #work-item-list .work-item-row:nth-child(5) { animation-delay: 100ms; }
  #work-item-list .work-item-row:nth-child(n+6) { animation-delay: 120ms; }
  @media (prefers-reduced-motion: reduce) {
    .work-item-row { animation: none; }
  }
  .work-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    animation: list-row-in 0.28s ease both;
  }
  .work-item-row.status-in-progress { border-left-color: var(--accent); }
  .work-item-row.status-in-review { border-left-color: var(--accent-2); }
  .work-item-row.status-pending { border-left-color: var(--amber); }
  .work-item-row.status-done { border-left-color: var(--green); }
  .work-item-row.done { opacity: 0.55; }
  /* Pulses once when a linked workspace closes itself out and carries this item
     to "done" live (see flashClosedWorkItemRow in work-items.js) — same idea as
     .pin-flash in workspace.css, green instead of amber since this marks a
     completion rather than a pin. */
  .work-item-row.work-item-closed-flash { animation: work-item-closed-flash-anim 1.6s ease; }
  @keyframes work-item-closed-flash-anim {
    0% { box-shadow: 0 0 0 2px var(--green); }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .work-item-status-select { flex-shrink: 0; font-weight: 700; margin-top: 1px; }
  .work-item-status-select.status-open { color: var(--text-dim); }
  .work-item-status-select.status-in-progress { color: var(--accent); border-color: rgba(62,90,76,0.4); }
  .work-item-status-select.status-in-review { color: var(--accent-2); border-color: rgba(85,124,104,0.4); }
  .work-item-status-select.status-pending { color: var(--amber); border-color: rgba(245,184,79,0.4); }
  .work-item-status-select.status-done { color: var(--green); border-color: rgba(62,207,142,0.4); }
  .work-item-status-select.status-in-progress:hover, .work-item-status-select.status-in-progress:focus {
    border-color: var(--accent); box-shadow: 0 0 0 3px rgba(62,90,76,0.18);
  }
  .work-item-status-select.status-in-review:hover, .work-item-status-select.status-in-review:focus {
    border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(85,124,104,0.18);
  }
  .work-item-status-select.status-pending:hover, .work-item-status-select.status-pending:focus {
    border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,184,79,0.18);
  }
  .work-item-status-select.status-done:hover, .work-item-status-select.status-done:focus {
    border-color: var(--green); box-shadow: 0 0 0 3px rgba(62,207,142,0.18);
  }
  .work-item-row .body { flex: 1; min-width: 0; }
  .work-item-row .subject { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .work-item-row.done .subject { text-decoration: line-through; }
  .work-item-row .desc { font-size: 12px; color: var(--text-dim); margin-top: 4px; white-space: pre-wrap; }
  .work-item-row .meta { font-size: 10.5px; color: var(--text-dim); margin-top: 6px; opacity: 0.75; }
  .work-item-kind-badge.bug { background: rgba(255,107,107,0.15); color: var(--red); }
  .work-item-kind-badge.feature { background: rgba(62,207,142,0.15); color: var(--green); }
  .work-item-kind-badge.fix { background: rgba(245,184,79,0.15); color: var(--amber); }
  .work-item-kind-badge.bug .icon-svg { color: var(--red); filter: none; }
  .work-item-kind-badge.feature .icon-svg { color: var(--green); filter: none; }
  .work-item-kind-badge.fix .icon-svg { color: var(--amber); filter: none; }
  .work-item-priority-badge.high { background: rgba(255,107,107,0.15); color: var(--red); }
  .work-item-priority-badge.medium { background: rgba(245,184,79,0.15); color: var(--amber); }
  .work-item-priority-badge.low { background: rgba(62,207,142,0.15); color: var(--green); }
  /* Deliberately a different color family (verdigris) from the priority badge above so the two
     axes — urgency vs. blast-radius — stay visually distinct at a glance. */
  .work-item-impact-badge.high { background: rgba(85,124,104,0.35); color: var(--accent-2); }
  .work-item-impact-badge.medium { background: rgba(85,124,104,0.18); color: var(--accent-2); }
  .work-item-impact-badge.low { background: rgba(155,149,138,0.15); color: var(--text-dim); }
  .work-item-row-actions { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; align-self: flex-start; }
  .work-item-row-actions button {
    display: flex; align-items: center; gap: 6px;
    background: var(--panel-2); color: var(--text-dim); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 10px; font-size: 11.5px; font-family: inherit;
    white-space: nowrap; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease;
  }
  /* Sized in px rather than em so the glyph stays legible independent of
     the (deliberately compact) button label font — at 1em it shrank to
     ~11.5px and was hard to make out. */
  .work-item-row-actions .icon-svg { width: 15px; height: 15px; }
  .work-item-row-actions .launch-btn:hover { color: var(--green); border-color: var(--green); }
  .work-item-row-actions .convert-btn:hover { color: var(--accent); border-color: var(--accent); }
  .work-item-row-actions .edit-btn:hover { color: var(--text); border-color: var(--text-dim); }
  .work-item-row-actions .del-btn:hover { color: var(--red); border-color: var(--red); }
  .work-item-row-actions .launch-btn:hover .icon-svg { color: var(--green); filter: drop-shadow(0 0 5px rgba(62,207,142,0.5)); }
  .work-item-row-actions .convert-btn:hover .icon-svg { color: var(--accent); filter: drop-shadow(0 0 5px rgba(62,90,76,0.5)); }
  .work-item-row-actions .edit-btn:hover .icon-svg { color: var(--text); filter: none; }
  .work-item-row-actions .del-btn:hover .icon-svg { color: var(--red); filter: drop-shadow(0 0 5px rgba(255,107,107,0.5)); }
  #work-item-empty { color: var(--text-dim); font-size: 13px; padding: 12px 24px; }

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

  .work-item-row .links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .work-item-link-badge {
    color: var(--text-dim); background: var(--bg);
    border: 1px solid var(--border);
  }
  .work-item-link-badge.resolves { color: var(--green); }

  .work-item-row .attached-workspaces { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
  .work-item-workspace-badge {
    color: var(--green); background: rgba(62,207,142,0.1);
    border: 1px solid rgba(62,207,142,0.35);
    cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .work-item-workspace-badge:hover { border-color: var(--green); }
  .work-item-workspace-badge .icon-svg { width: 11px; height: 11px; color: var(--green); filter: none; }
  .work-item-workspace-badge.archived { color: var(--text-dim); background: var(--bg); border-color: var(--border); }
  .work-item-workspace-badge.archived .icon-svg { color: var(--text-dim); }

  #work-item-rel-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
  #work-item-rel-section.hidden { display: none; }
  #work-item-rel-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
  #work-item-rel-list:empty::before { content: "No relationships yet."; font-size: 12px; color: var(--text-dim); }
  .work-item-rel-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 6px 10px; font-size: 12px;
  }
  .work-item-rel-row .work-item-rel-label { flex: 1; min-width: 0; color: var(--text); }
  .work-item-rel-row .work-item-rel-kind { color: var(--text-dim); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; }
  .work-item-rel-row .del { color: var(--text-dim); font-size: 13px; cursor: pointer; flex-shrink: 0; }
  .work-item-rel-row .del:hover { color: var(--red); }
  #work-item-rel-add { display: flex; gap: 6px; }
  #work-item-rel-add select { width: auto; flex: 1; }
  #work-item-rel-add button {
    flex-shrink: 0; border: none; color: #070605;
    font-weight: 700; padding: 0 14px; font-size: 12.5px;
  }
  .work-item-rel-target-btn {
    flex: 1; min-width: 0;
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 9px 10px; font-size: 12.5px; font-family: inherit;
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 6px;
  }
  .work-item-rel-target-btn:hover { border-color: var(--accent); }
  .work-item-rel-target-btn:disabled { cursor: default; opacity: 0.5; }
  .work-item-rel-target-btn .work-item-kind-badge { flex-shrink: 0; }

  #work-item-picker-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,7,10,0.72);
    align-items: center;
    justify-content: center;
    z-index: 110;
  }
  #work-item-picker-overlay.visible { display: flex; }
  #work-item-picker-search {
    width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 9px 10px; font-size: 12.5px; outline: none; font-family: inherit;
    margin-top: 4px;
  }
  #work-item-picker-search:focus { border-color: var(--accent); }
  #work-item-picker-toolbar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
  #work-item-picker-toolbar .work-item-kind-filter { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; }
  #work-item-picker-toolbar select { width: auto; flex-shrink: 0; }
  #work-item-picker-list {
    display: flex; flex-direction: column; gap: 5px;
    margin-top: 12px; max-height: 340px; overflow-y: auto;
  }
  #work-item-picker-empty { color: var(--text-dim); font-size: 12.5px; padding: 14px 4px; text-align: center; }
  .work-item-picker-row {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
    padding: 8px 10px; font-size: 12.5px; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .work-item-picker-row:hover { border-color: var(--accent); background: var(--panel-2); }
  .work-item-picker-row.done { opacity: 0.55; }
  .work-item-picker-row.done .work-item-picker-row-title { text-decoration: line-through; }
  .work-item-picker-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .work-item-picker-row-done .icon-svg { color: var(--green); filter: none; width: 14px; height: 14px; }