/* Colour values and state assignments live exclusively in states.js. */
.state-color[data-state] {
  background: var(--state-bg);
  color: var(--state-fg);
  border-color: var(--state-fg);
}
.status.state-color::before { background: currentColor; }
.state-color[data-state] > i { background: currentColor; }
.state-color[data-state] > strong, .state-color[data-state] > span { color: inherit; }
select.state-color option { background: white; color: #01203a; }
.state-color[data-state]:hover { color: var(--state-fg); }
.state-color[data-state]:focus-visible { outline: 2px solid var(--state-fg); outline-offset: 3px; }
.state-count { padding: 6px 10px; border-radius: 4px; display: inline-flex; gap: 6px; }
.filter-pill.state-color.active { box-shadow: inset 0 0 0 1px currentColor; }
.tv-task-chip.state-color { padding: 4px 7px; border-radius: 4px; }
.tv-project[data-state] { border-left-color: var(--state-fg); }
.tv-attention-item[data-state] > i, .tv-connection[data-state] > i { background: var(--state-fg); }
.tv-progress i[data-state], .progress i[data-state] { background: var(--state-fg); }
.tv-due.overdue[data-state] strong, .tv-deadline-item.overdue[data-state] p,
.tv-deadline-item.overdue[data-state] > strong { color: var(--state-fg); }
.state-reference { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.state-reference section { min-width: 0; }
.state-reference h2 { margin: 0 0 18px; font-size: 16px; }
.state-reference table { width: 100%; min-width: 0; }
.state-reference td { padding: 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.state-reference tr:last-child td { border-bottom: 0; }
.state-reference td:last-child { text-align: right; }
.state-reference .colour-name { font-size: 12px; color: var(--muted); display: block; margin-bottom: 3px; }
.state-reference code { font-size: 10px; color: var(--muted); white-space: nowrap; }
.state-reference-note { font-size: 12px; color: var(--muted); margin: 0 0 24px; }
@media(max-width: 850px) { .state-reference { grid-template-columns: 1fr; } }