/* Shared UI primitives: tokens + reusable components */
:root {
  --ui-filter-bar-bg: var(--color-surface-primary);
  --ui-filter-bar-border: var(--color-border-primary);
  --ui-filter-bar-radius: 0.75rem;
  --ui-filter-bar-gap: 0.65rem;
  --ui-filter-bar-padding: 0.85rem;
  --ui-filter-bar-title-size: 0.95rem;
  --ui-filter-bar-subtitle-size: 0.82rem;
  --ui-filter-bar-toggle-height: 2rem;
  --ui-filter-bar-toggle-padding-x: 0.7rem;
  --ui-filter-bar-toggle-count-size: 1.2rem;

  --ui-status-badge-radius: 999px;
  --ui-status-badge-font-size: 0.688rem;
  --ui-status-badge-font-weight: 600;
  --ui-status-badge-padding-y: 0.18rem;
  --ui-status-badge-padding-x: 0.45rem;
  --ui-status-badge-letter-spacing: 0.025em;

  --ui-table-header-gap: 0.6rem;
  --ui-table-header-title-size: 0.95rem;
  --ui-table-header-subtitle-size: 0.82rem;

  --ui-row-actions-gap: 0.4rem;
  --ui-dialog-title-size: 1rem;
  --ui-dialog-section-title-size: 0.78rem;
  --ui-dialog-section-title-spacing: 0.045em;
  --ui-dialog-copy-size: 0.9rem;
  --ui-dialog-meta-size: 0.78rem;
}

.ui-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: var(--ui-density-section-gap);
}

.ui-page-toolbar__title-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.ui-page-toolbar__title-actions .btn {
  white-space: nowrap;
}

.ui-page-toolbar__controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
  margin-left: auto;
  flex-wrap: wrap;
}

.ui-page-toolbar__search-form {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  width: clamp(16.5rem, 22vw, 22rem);
}

@media (max-width: 1100px) and (min-width: 1000px) {
  .ui-page-toolbar__search-form {
    width: clamp(12.75rem, 20vw, 15.75rem);
  }
}

.ui-page-toolbar__search-input {
  min-height: var(--ui-density-control-height);
}

.ui-filter-dialog__trigger {
  min-height: var(--ui-density-control-height);
}

.ui-filter-dialog__modal {
  width: min(720px, 92vw);
  border: 1px solid var(--color-border-secondary);
  border-radius: 12px;
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-lg);
  padding: 0;
  text-align: left;
  white-space: normal;
}

.ui-filter-dialog__modal.ui-dialog--lg {
  width: min(960px, 94vw);
}

.ui-filter-dialog__modal.ui-dialog--xl {
  width: min(1120px, calc(100vw - 2rem));
}

.ui-filter-dialog__modal.ui-dialog--full {
  width: min(1360px, calc(100vw - 1rem));
}

.ui-filter-dialog__modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.ui-filter-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid var(--color-border-primary);
  padding: 0.75rem 0.9rem;
}

.ui-filter-dialog__title {
  margin: 0;
  font-size: var(--ui-dialog-title-size);
}

.ui-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-border-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.ui-dialog-close:hover,
.ui-dialog-close:focus-visible {
  border-color: var(--color-brand-primary);
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-brand-primary) 10%, transparent);
  outline: none;
}

.ui-filter-dialog__form {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
}

.ui-filter-dialog__body {
  display: grid;
  gap: 0.65rem;
}

.ui-filter-dialog__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.ui-dialog-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: inherit;
  min-height: 0;
}

.ui-dialog-scroll {
  min-height: 0;
  max-height: calc(100vh - 9.75rem);
  overflow: auto;
}

.ui-dialog-loading,
.ui-dialog-error {
  margin: 0;
  color: var(--color-text-secondary);
}

.ui-dialog-detail-body {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  color: var(--color-text-primary);
}

.ui-dialog-detail-body p,
.ui-dialog-detail-body li,
.ui-dialog-detail-body dd,
.ui-dialog-detail-body label {
  color: inherit;
}

.ui-detail-section {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.75rem;
  background: var(--color-surface-primary);
  box-shadow: var(--shadow-sm);
}

.ui-detail-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ui-detail-section__eyebrow,
.ui-detail-section__title {
  margin: 0;
  font-size: var(--ui-dialog-section-title-size);
  font-weight: 700;
  letter-spacing: var(--ui-dialog-section-title-spacing);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ui-detail-section__subtitle {
  margin: 0.2rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--ui-dialog-copy-size);
  line-height: 1.45;
}

.ui-detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.ui-detail-summary-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.7rem;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
}

button.ui-detail-summary-card {
  appearance: none;
  color: inherit;
  font: inherit;
}

.ui-detail-summary-card__label,
.ui-detail-summary-label {
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.ui-detail-summary-card__value,
.ui-detail-summary-value {
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.ui-detail-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.attachment-picker {
  display: grid;
  gap: 0.6rem;
}

.attachment-picker__row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.attachment-picker__summary {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.attachment-picker__choose-files {
  margin: 0;
}

.attachment-picker__preview-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.attachment-picker__preview-item {
  margin: 0;
  display: grid;
  gap: 0.32rem;
}

.attachment-picker__preview-thumb,
.attachment-picker__file-badge {
  width: 100%;
  height: 90px;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-surface-base);
}

.attachment-picker__preview-thumb {
  object-fit: cover;
}

.attachment-picker__file-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.attachment-picker__preview-name {
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.ui-detail-grid {
  display: grid;
  gap: 0.75rem;
}

.ui-detail-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-detail-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-detail-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.75rem;
  background: var(--color-surface-secondary);
}

.ui-detail-card__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.92rem;
  font-weight: 600;
}

.ui-detail-card__meta {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--ui-dialog-copy-size);
}

.ui-detail-definition-grid {
  margin: 0;
  display: grid;
  gap: 0.65rem 0.9rem;
}

.ui-detail-definition-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-detail-definition-grid > div {
  min-width: 0;
}

.ui-detail-definition-grid dt {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ui-detail-definition-grid dd {
  margin: 0.2rem 0 0;
  color: var(--color-text-primary);
  line-height: 1.42;
}

.ui-detail-note {
  display: grid;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--color-border-secondary);
  border-radius: 0.65rem;
  background: var(--color-surface-elevated);
}

.ui-detail-note__title {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.ui-detail-note p {
  margin: 0;
  line-height: 1.45;
}

.ui-detail-list,
.ui-detail-history {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.32rem;
}

.ui-detail-list li,
.ui-detail-history li {
  color: var(--color-text-primary);
  line-height: 1.4;
}

.ui-detail-stack {
  display: grid;
  gap: 0.6rem;
}

.ui-linked-list {
  display: grid;
  gap: 0.65rem;
}

.ui-linked-item {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.75rem;
  background: var(--color-surface-secondary);
}

.ui-linked-item__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ui-linked-item__title-wrap {
  min-width: 0;
}

.ui-linked-item__eyebrow {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.ui-linked-item__title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.ui-linked-item__badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.ui-linked-item__badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-secondary);
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
}

.ui-linked-item__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  line-height: 1.4;
}

.ui-linked-item__summary {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
}

.initiative-checklist-editor {
  min-width: 0;
  gap: 0.65rem;
}

.initiative-checklist-editor__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.initiative-checklist-editor__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.initiative-checklist-editor__title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
}

.initiative-checklist-editor__title h4 {
  margin: 0;
  font-size: 0.98rem;
}

.initiative-phase-checklist-count {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

.initiative-checklist-editor__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.initiative-checklist-editor__filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.initiative-checklist-editor__body {
  display: grid;
  gap: 0.5rem;
}

.initiative-deliverable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.34rem;
}

.initiative-deliverable-composer {
  display: grid;
  grid-template-columns: 1.55rem 1rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(118, 153, 217, 0.2);
  border-radius: 0.65rem;
  background: var(--color-surface-secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.initiative-deliverable-composer-spacer {
  width: 1.55rem;
  min-width: 1.55rem;
}

.initiative-deliverable-composer-status {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.28rem;
  background: var(--color-surface-elevated);
}

.initiative-deliverable-item {
  display: grid;
  grid-template-columns: 1.55rem 1rem minmax(0, 1fr) auto 1.55rem;
  align-items: center;
  gap: 0.42rem;
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(118, 153, 217, 0.2);
  border-radius: 0.65rem;
  background: var(--color-surface-secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  min-width: 0;
}

.initiative-deliverable-item[hidden] {
  display: none;
}

.initiative-deliverable-item:focus-within {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

.initiative-deliverable-item-ghost {
  opacity: 0.68;
  border-color: var(--color-border-focus);
}

.initiative-deliverable-item-chosen {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16);
}

.initiative-deliverable-item-dragging {
  opacity: 0.9;
}

.initiative-drag-handle,
.initiative-remove-item {
  border: 1px solid var(--color-border-primary);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  border-radius: 0.55rem;
  width: 1.55rem;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.initiative-drag-handle {
  cursor: grab;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 700;
}

.initiative-drag-handle:active {
  cursor: grabbing;
}

.initiative-remove-item {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

.initiative-remove-item:hover,
.initiative-remove-item:focus-visible {
  border-color: rgba(236, 98, 43, 0.6);
  color: #ffd3c0;
}

.initiative-deliverable-item.without-status-toggle {
  grid-template-columns: 1.55rem minmax(0, 1fr) auto 1.55rem;
}

.initiative-deliverable-source-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 auto;
}

.initiative-deliverable-ai-dot {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
  flex: 0 0 auto;
}

.initiative-deliverable-source-note[hidden],
.initiative-deliverable-ai-dot[hidden] {
  display: none !important;
}

.initiative-deliverable-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.38rem;
}

.initiative-deliverable-copy--composer {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.initiative-deliverable-status {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand-primary);
}

.initiative-deliverable-input {
  width: 100%;
  min-height: 1.1rem;
  padding: 0.14rem 0 0.02rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  resize: none;
  overflow: hidden;
  box-shadow: none;
  margin: 0;
  display: block;
}

.initiative-deliverable-input::placeholder {
  color: var(--color-text-tertiary);
}

.initiative-deliverable-input:focus {
  border: 0;
  outline: none;
  box-shadow: none;
}

.initiative-deliverable-input--composer {
  min-height: 1.1rem;
  padding: 0.1rem 0;
}

.initiative-deliverable-item.is-done .initiative-deliverable-input {
  color: var(--color-text-secondary);
  text-decoration: line-through;
}

.initiative-board-filter-chip {
  border: 1px solid var(--color-border-primary);
  background: var(--color-surface-elevated);
  color: var(--color-text-secondary);
  border-radius: 999px;
  padding: 0.28rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
}

.initiative-board-filter-chip:hover,
.initiative-board-filter-chip:focus-visible {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.initiative-board-filter-chip .initiative-stage-tag,
.initiative-stage-popover-trigger .initiative-stage-tag {
  margin-left: 0;
}

.initiative-board-filter-chip.is-active {
  border-color: var(--color-border-hover);
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

.initiative-board-filter-chip--stage {
  padding: 0.18rem 0.56rem;
  min-height: 1.75rem;
}

.initiative-board-filter-chip--stage.initiative-stage-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ui-detail-attachment-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.ui-detail-attachment-item {
  display: grid;
  gap: 0.32rem;
}

.ui-detail-attachment-thumb {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-surface-base);
}

.ui-detail-attachment-name {
  margin: 0;
  font-size: 0.74rem;
  color: var(--color-text-tertiary);
  overflow-wrap: anywhere;
}

.ui-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.ui-dialog-actions__danger {
  margin-right: auto;
}

.ui-delete-dialog {
  display: inline-flex;
}

.ui-delete-dialog__summary {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ui-delete-dialog__lead {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.ui-delete-dialog__impact-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
  color: var(--color-text-primary);
}

.ui-delete-dialog__impact-list li {
  margin: 0;
}

body.ui-dialog-open {
  overflow: hidden;
}

.ui-filter-bar {
  margin-bottom: 0.85rem;
}

.ui-filter-bar__form {
  display: grid;
  gap: var(--ui-filter-bar-gap);
  background: var(--ui-filter-bar-bg);
  border: 1px solid var(--ui-filter-bar-border);
  border-radius: var(--ui-filter-bar-radius);
  box-shadow: var(--shadow-sm);
  padding: var(--ui-filter-bar-padding);
}

.ui-filter-bar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-filter-bar-gap);
}

.ui-filter-bar__controls > * {
  min-width: 0;
}

.ui-filter-bar__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--ui-row-actions-gap);
}

.ui-filter-bar__panel {
  display: grid;
  gap: var(--ui-filter-bar-gap);
}

.ui-filter-bar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.ui-filter-bar__heading {
  min-width: 0;
}

.ui-filter-bar__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--ui-filter-bar-title-size);
  font-weight: 600;
}

.ui-filter-bar__subtitle {
  margin: 0.2rem 0 0;
  color: var(--color-text-secondary);
  font-size: var(--ui-filter-bar-subtitle-size);
}

.ui-filter-bar__header-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-row-actions-gap);
  flex-wrap: wrap;
}

.ui-filter-bar__filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--ui-filter-bar-toggle-height);
  border: 1px solid var(--color-border-secondary);
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.2rem var(--ui-filter-bar-toggle-padding-x);
  white-space: nowrap;
  cursor: pointer;
}

.ui-filter-bar__filters-toggle:hover {
  background: var(--color-interactive-hover);
}

.ui-filter-bar__filters-toggle:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-brand-primary-subtle);
}

.ideas-index-filters-summary:focus-visible,
.initiatives-index-filters-summary:focus-visible,
.users-index-filters-summary:focus-visible,
.goal-cards-index-filters-summary:focus-visible {
  outline: none;
  border-radius: 0.4rem;
  box-shadow: 0 0 0 3px var(--color-brand-primary-subtle);
}

.ui-filter-bar__active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ui-filter-bar-toggle-count-size);
  height: var(--ui-filter-bar-toggle-count-size);
  border-radius: 999px;
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.ui-filter-bar.is-collapsed .ui-filter-bar__panel,
.ui-filter-bar__panel[data-expanded="false"] {
  display: none;
}

.ui-filter-bar--compact {
  --ui-filter-bar-padding: 0.8rem;
}

.ui-filter-bar--compact .ui-filter-bar__controls {
  gap: 0.6rem;
}

.ideas-index-filters-panel,
.initiatives-index-filters-panel,
.users-index-filters-panel,
.goal-cards-index-filters-panel {
  margin: 0.3rem 0 0.85rem;
}

.ideas-index-filters-summary,
.initiatives-index-filters-summary,
.users-index-filters-summary,
.goal-cards-index-filters-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--ui-filter-bar-toggle-height);
  border: 1px solid var(--color-border-secondary);
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  padding: 0.24rem 0.72rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
}

.ideas-index-filters-summary::marker,
.ideas-index-filters-summary::-webkit-details-marker,
.initiatives-index-filters-summary::marker,
.initiatives-index-filters-summary::-webkit-details-marker,
.users-index-filters-summary::marker,
.users-index-filters-summary::-webkit-details-marker,
.goal-cards-index-filters-summary::marker,
.goal-cards-index-filters-summary::-webkit-details-marker {
  display: none;
}

.ideas-index-filters-panel[open] > .ideas-index-filters-summary,
.initiatives-index-filters-panel[open] > .initiatives-index-filters-summary,
.users-index-filters-panel[open] > .users-index-filters-summary,
.goal-cards-index-filters-panel[open] > .goal-cards-index-filters-summary {
  margin-bottom: 0.55rem;
}

.ui-filter-chip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ui-filter-chip {
  position: relative;
}

.ui-filter-chip--inline-options[open] {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ui-filter-chip > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 0.76rem;
  line-height: 1.15;
}

.ui-filter-chip > summary::-webkit-details-marker,
.ui-filter-chip > summary::marker {
  display: none;
}

.ui-filter-chip > summary strong {
  color: var(--color-text-primary);
  font-weight: 700;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-filter-chip[open] > summary,
.ui-filter-chip > summary:hover,
.ui-filter-chip > summary:focus-visible {
  border-color: var(--color-border-hover);
  background: var(--color-surface-tertiary);
}

.ui-filter-chip.is-active > summary {
  border-color: rgba(236, 98, 43, 0.45);
  background: var(--color-brand-primary-subtle);
  color: var(--color-text-primary);
}

.ui-filter-chip.is-active > summary strong {
  color: var(--color-text-primary);
}

.ui-filter-chip__popover {
  position: absolute;
  top: calc(100% + 0.34rem);
  right: 0;
  z-index: 16;
  min-width: 14.5rem;
  border: 1px solid var(--color-border-secondary);
  border-radius: 11px;
  background: var(--color-surface-primary);
  box-shadow: var(--shadow);
  padding: 0.5rem;
}

.ui-filter-chip--inline-options .ui-filter-chip__popover {
  position: static;
  min-width: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ui-filter-chip__option-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  max-height: 14rem;
  overflow: auto;
}

.ui-filter-chip--inline-options .ui-filter-chip__option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: none;
  overflow: visible;
}

.ui-filter-chip__option {
  display: flex;
  align-items: center;
  width: 100%;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.76rem;
  line-height: 1.2;
  padding: 0.35rem 0.48rem;
}

.ui-filter-chip--inline-options .ui-filter-chip__option {
  width: auto;
  border-color: var(--color-border-secondary);
  border-radius: 999px;
  background: var(--color-surface-secondary);
  padding: 0.35rem 0.7rem;
  white-space: nowrap;
}

.ui-filter-chip__option:hover,
.ui-filter-chip__option:focus-visible {
  border-color: var(--color-border-hover);
  background: var(--color-surface-secondary);
}

.ui-filter-chip__option.is-active {
  border-color: rgba(236, 98, 43, 0.45);
  background: var(--color-brand-primary-subtle);
  color: var(--color-text-primary);
}

.ui-filter-chip__form {
  display: grid;
  gap: 0.5rem;
}

.ui-filter-chip__check-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  font-size: 0.76rem;
  line-height: 1.2;
  padding: 0.4rem 0.48rem;
  cursor: pointer;
}

.ui-filter-chip__check-option:hover,
.ui-filter-chip__check-option:focus-within {
  border-color: var(--color-border-hover);
  background: var(--color-surface-secondary);
}

.ui-filter-chip__check-option.is-active {
  border-color: rgba(236, 98, 43, 0.45);
  background: var(--color-brand-primary-subtle);
  color: var(--color-text-primary);
}

.ui-filter-chip__checkbox {
  margin: 0;
  accent-color: var(--color-brand-primary);
}

.ui-filter-chip__footer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.2rem;
}

.ui-filter-chip__footer--compact {
  justify-content: flex-start;
}

.ui-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ui-status-badge-radius);
  padding: var(--ui-status-badge-padding-y) var(--ui-status-badge-padding-x);
  font-size: var(--ui-status-badge-font-size);
  font-weight: var(--ui-status-badge-font-weight);
  letter-spacing: var(--ui-status-badge-letter-spacing);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-status-badge--sm {
  --ui-status-badge-font-size: 0.65rem;
  --ui-status-badge-padding-y: 0.15rem;
  --ui-status-badge-padding-x: 0.38rem;
}

.ui-status-badge--md {
  --ui-status-badge-font-size: 0.688rem;
}

.ui-status-badge--lg {
  --ui-status-badge-font-size: 0.75rem;
  --ui-status-badge-padding-y: 0.24rem;
  --ui-status-badge-padding-x: 0.52rem;
}

.ui-status-badge--caps-off {
  text-transform: none;
  letter-spacing: 0;
}

.ui-status-badge--neutral {
  background: var(--color-status-neutral-bg);
  border-color: var(--color-status-neutral-border);
  color: var(--color-status-neutral-text);
}

.ui-status-badge--success {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.ui-status-badge--warning {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.ui-status-badge--danger {
  background: var(--color-status-danger-bg);
  border-color: var(--color-status-danger-border);
  color: var(--color-status-danger-text);
}

.ui-status-badge--info {
  background: var(--color-status-info-bg);
  border-color: var(--color-status-info-border);
  color: var(--color-status-info-text);
}

.ui-table-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-table-header-gap);
  margin: 0.85rem 0 0.5rem;
}

.ui-table-section-header__content {
  min-width: 0;
}

.ui-table-section-header__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--ui-table-header-title-size);
  color: var(--color-text-primary);
}

.ui-table-section-header__subtitle {
  margin: 0.22rem 0 0;
  font-size: var(--ui-table-header-subtitle-size);
  color: var(--color-text-secondary);
}

.ask-human-index-filter-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-table-section-header__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--color-brand-primary-subtle);
  color: var(--color-brand-primary);
  font-size: 0.72rem;
  font-weight: 600;
}

.ui-table-section-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-row-actions-gap);
  flex-wrap: wrap;
}

.ui-summary-block {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.ui-summary-stat {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.22rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.ui-summary-stat__label,
.ui-summary-stat__value {
  margin: 0;
}

.ui-summary-stat__label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ui-summary-stat__value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.ui-summary-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.ui-object-chip-stack {
  display: grid;
  gap: 0.45rem;
}

.ui-object-chip-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.ui-object-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
}

.ui-object-selector-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.8rem;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.25;
}

.ui-object-selector-item input {
  margin: 0;
}

.ui-object-selector-item span {
  min-width: 0;
}

.ui-object-chip-row__label,
.ui-object-chip-row__kind {
  display: inline-flex;
  min-width: 0;
}

.ui-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.3rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 999px;
  background: var(--color-surface-secondary);
  flex-wrap: wrap;
}

.ui-view-switcher__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-weight: 600;
  text-decoration: none;
}

.ui-view-switcher__link:hover,
.ui-view-switcher__link:focus-visible {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.ui-view-switcher__link.is-active {
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

.ui-view-switcher__link--archived {
  order: 999;
}

.ui-view-switcher__count {
  min-width: 1.5rem;
  min-height: 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  background: color-mix(in srgb, var(--color-surface-primary) 88%, var(--color-border-secondary) 12%);
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-primary);
  font-size: 0.78rem;
}

.ui-row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-row-actions-gap);
  flex-wrap: wrap;
}

.ui-row-actions--compact {
  --ui-row-actions-gap: 0.35rem;
}

.ui-row-actions--start {
  justify-content: flex-start;
}

.ui-row-actions--center {
  justify-content: center;
}

.ui-row-actions--end {
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .ui-page-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-page-toolbar__title-actions {
    width: 100%;
    justify-content: space-between;
  }

  .ui-page-toolbar__controls {
    width: 100%;
    justify-content: stretch;
  }

  .ui-page-toolbar__search-form {
    width: 100%;
  }

  .ui-filter-dialog {
    width: 100%;
  }

  .ui-filter-dialog__trigger {
    width: 100%;
  }

  .ui-delete-dialog {
    width: auto;
  }

  .ui-delete-dialog > .btn,
  .ui-delete-dialog > .btn-icon {
    width: auto;
  }

  .ui-filter-dialog__modal {
    width: min(96vw, 720px);
  }

  .ui-filter-dialog__footer {
    justify-content: stretch;
  }

  .ui-filter-dialog__footer .btn {
    width: 100%;
  }

  .ui-detail-grid--two,
  .ui-detail-grid--three,
  .ui-detail-definition-grid--two {
    grid-template-columns: 1fr;
  }

  .ui-linked-item__header,
  .ui-detail-section__header {
    flex-direction: column;
  }

  .initiative-checklist-editor__header {
    flex-direction: column;
  }

  .initiative-checklist-editor__header .btn {
    width: 100%;
  }

  .initiative-deliverable-item {
    grid-template-columns: 1.9rem 1rem minmax(0, 1fr) auto 1.9rem;
    gap: 0.55rem;
    padding: 0.65rem;
  }

  .initiative-deliverable-item.without-status-toggle {
    grid-template-columns: 1.9rem minmax(0, 1fr) auto 1.9rem;
  }

  .initiative-deliverable-composer {
    grid-template-columns: 1.9rem 1rem minmax(0, 1fr) auto;
    padding: 0.65rem;
  }

  .ask-human-index-filter-grid {
    grid-template-columns: 1fr;
  }

  .ui-filter-bar__form {
    padding: 0.8rem;
  }

  .ui-filter-bar__header {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-filter-bar__header-actions {
    width: 100%;
  }

  .ui-filter-bar__filters-toggle {
    width: fit-content;
  }

  .ui-filter-bar__controls {
    align-items: stretch;
  }

  .ui-filter-bar__controls .search-field,
  .ui-filter-bar__controls .filter-field {
    flex: 1 1 100%;
    min-width: 0;
  }

  .ui-filter-bar__actions {
    justify-content: stretch;
  }

  .ui-filter-bar__actions .btn {
    width: 100%;
  }

  .ui-row-actions--stack-mobile {
    display: grid;
    justify-items: stretch;
  }

  .ui-row-actions--stack-mobile > * {
    width: 100%;
  }

  .ui-table-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ui-table-section-header__actions {
    width: 100%;
  }

  .ideas-index-filters-summary,
  .initiatives-index-filters-summary,
  .users-index-filters-summary,
  .goal-cards-index-filters-summary {
    width: 100%;
    justify-content: center;
  }

  .ui-filter-chip-row {
    width: 100%;
  }

  .ui-filter-chip {
    flex: 1 1 12rem;
  }

  .ui-view-switcher {
    width: 100%;
    justify-content: stretch;
  }

  .ui-view-switcher__link {
    flex: 1 1 12rem;
    justify-content: center;
  }

  .ui-filter-chip > summary {
    width: 100%;
    justify-content: space-between;
  }

  .ui-filter-chip__popover {
    left: 0;
    right: auto;
    min-width: min(100%, 17rem);
    width: min(100%, 17rem);
  }

  .ui-filter-chip--inline-options[open] {
    display: block;
  }

  .ui-filter-chip--inline-options .ui-filter-chip__popover {
    width: 100%;
    min-width: 0;
    margin-top: 0.4rem;
  }

  .ui-filter-chip--inline-options .ui-filter-chip__option-list {
    width: 100%;
  }
}

.comment-thread {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 1rem;
  background: var(--color-surface-primary);
}

.comment-thread__header {
  display: grid;
  gap: 0.25rem;
}

.comment-thread__title {
  margin: 0;
  font-size: 1rem;
}

.comment-thread__hint,
.comment-thread__empty,
.comment-thread__meta {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.comment-thread__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.comment-thread__item {
  display: grid;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.75rem;
  background: var(--color-surface-secondary);
}

.comment-thread__item:last-child {
  margin-bottom: 0;
}

.comment-thread__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.comment-thread__meta-trailing {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.comment-thread__body {
  margin: 0;
  color: var(--color-text-primary);
  white-space: pre-wrap;
}

.comment-thread__meta-actions {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.comment-thread__inline-action {
  display: inline-flex;
}

.comment-thread__item-editor {
  margin-top: 0.35rem;
}

.comment-thread__composer-hint {
  margin: 0.35rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  line-height: 1.45;
}

.comment-thread__composer-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.comment-thread__attachments {
  display: grid;
  gap: 0.6rem;
}

.comment-thread__attachments-title {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.comment-thread--compact {
  margin-top: 0;
  padding: 0.8rem;
  gap: 0.65rem;
  border-radius: 0.85rem;
}

.comment-thread--compact .comment-thread__list {
  gap: 0.55rem;
}

.comment-thread--compact .comment-thread__item {
  gap: 0.3rem;
  padding-bottom: 0.55rem;
}

.comment-thread--compact .comment-thread__meta,
.comment-thread--compact .comment-thread__empty {
  font-size: 0.82rem;
}

.comment-thread--compact .comment-thread__form {
  display: grid;
  gap: 0.55rem;
}

.comment-thread--compact .comment-thread__composer-actions {
  align-items: center;
}

.comment-thread--compact .attachment-picker {
  gap: 0.4rem;
}

.comment-thread--compact .attachment-picker__row {
  gap: 0.5rem;
}

.comment-thread--compact .attachment-picker__summary {
  font-size: 0.78rem;
}