/* 使用者列的樣式。
 *
 * ⚠️ **不可用 element.setAttribute('style', …)。** Traefik 的 CSP 是
 *    style-src 'self' —— 行內 style **屬性**同樣被擋(style-src-attr),
 *    元素會完全沒有樣式而不會有任何錯誤丟到程式裡。
 *    先前這裡是用 setAttribute 組樣式字串,實測被 CSP 拒絕。
 *
 * ⚠️ 色值與間距全部用 design-system 的 token,不寫死 —— 憲章 §10。
 */

.ds-userbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  /* 抵銷 body 的 padding,讓它貼齊視窗上緣 */
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  background: var(--surface-0);
  border-bottom: 1px solid var(--line-200);
  font: var(--text-label);
  color: var(--ink-700);
}

.ds-userbar__logout {
  background: var(--teal-600);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  font: inherit;
}

.ds-userbar__logout:hover,
.ds-userbar__logout:focus { background: var(--teal-700); }