/* タグの形状と意味色は共通管理し、ページ側は行の配置だけを指定する。 */
:is(.status-tag, .ui-tag, .important-label, .settings-status, .settings-field-status,
    .assignment-label, .connection-status, .dashboard-today-label, .status) {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 2rem;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-tag, 4px);
  background: var(--tag-background, var(--ui-neutral-background, #ecebe5));
  color: var(--tag-color, var(--ui-neutral-color, #595b53));
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

/* 文脈は寸法のみを決める。短い共通文言を同じ高さで揃える。 */
.status-tag--compact { width: fit-content; min-height: 1.5rem; padding: 2px 6px; white-space: nowrap; }
.status-tag--notice,
.status-tag--status,
.status-tag--connection,
.important-label,
.status,
.connection-status { width: 6rem; }
.status-tag--settings-field,
.settings-field-status { width: 4.5rem; }
/* 設定タブは項目名の横に収め、クリック領域の高さはリンク側で確保する。 */
.status-tag--settings-nav,
.settings-status { width: 3rem; min-height: 1.5rem; padding: 2px 4px; white-space: nowrap; }
.status-tag--assignment,
.assignment-label { width: 6rem; }
.status-tag--dashboard-today,
.dashboard-today-label { width: 4.5rem; }

/* 意味を持つ五色。文脈やページ固有クラスから意味色を変更しない。 */
.status-tag--neutral,
.important-label--general { --tag-background: var(--ui-neutral-background); --tag-color: var(--ui-neutral-color); }
.status-tag--info,
.important-label--presenter,
.important-label--request,
.important-label--url,
.important-label--schedule,
.important-label--scope,
.important-label--location,
.important-label--method { --tag-background: var(--ui-info-background); --tag-color: var(--ui-info-color); }
.status-tag--success,
.connection-status.is-connected { --tag-background: var(--ui-success-background); --tag-color: var(--ui-success-color); }
.status-tag--warning,
.important-label--prepare,
.important-label--adjust { --tag-background: var(--ui-warning-background); --tag-color: var(--ui-warning-color); }
.status-tag--danger,
.important-label--status { --tag-background: var(--ui-danger-background); --tag-color: var(--ui-danger-color); }

.status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--ui-space-2, 8px); }