/* 版面用的 utility class。
 *
 * ⚠️ **為什麼不用 style="…" 屬性:** Traefik 的 CSP 是 style-src 'self',
 *    它同時擋 <style> 元素(style-src-elem)與行內 style 屬性
 *    (style-src-attr)。用屬性寫的樣式會完全不生效,而且不會有錯誤 ——
 *    只是版面跑掉。
 *
 * ⚠️ 這裡只放**版面**(間距、寬度),不放顏色與字級 ——
 *    那些屬於 design-system(憲章 §10)。本檔的值也全部引用 token,
 *    不寫死數字。
 */

.u-m-0    { margin: 0; }
.u-mt-2   { margin-top: var(--space-2); }
.u-mt-3   { margin-top: var(--space-3); }
.u-mt-4   { margin-top: var(--space-4); }
.u-mt-5   { margin-top: var(--space-5); }
.u-mb-3   { margin-bottom: var(--space-3); }
.u-my-3   { margin: var(--space-3) 0; }

.u-w-0    { width: 0; }
.u-w-auto { width: auto; }
.u-w-8    { width: 8rem; }

.u-font-platform { font-family: var(--font-platform); }
.u-fs-h3         { font-size: var(--fs-h3); }

/* 表單的兩欄式版面(下單、登記等畫面共用) */
.u-form-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 34rem;
}

/* ⚠️ 後端錯誤橫幅。position:sticky 而非 fixed —— fixed 在手持裝置
   (D 系列)的小畫面上會蓋住第一個輸入框,而那正是使用者要操作的東西。 */
.api-error-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--red-100, #fde8e8);
  color: var(--red-700, #9b1c1c);
  border-bottom: 1px solid var(--red-500, #e02424);
  font: 500 14px/1.4 var(--font-app, system-ui, sans-serif);
}
.api-error-banner[hidden] { display: none; }