/* Empty State (canonical・案 B) — TASTEOME
   空・失敗・待ちの 1 つの型 (ART_DIRECTION §4c)。マーク / 見出し / 説明 / 次の一手 1 つを **左寄せ**で積む。
   寸法は mobile の同名部品 (apps/mobile/src/ui/shared/EmptyState.tsx) と同値:
   上下 24 / 左右 16・マーク 28 / 見出し 17 / 22・700 / 説明 14 / 20 / 次の一手 15・700・当たり 44。

   ⚠ inline の一言ヒント (`.filter-empty` / `.tl-tier-empty` / `.adm-empty` 等) は別の役割
      なのでここへ寄せない。寄せる対象は「その面の主要領域が空の時に出る塊」だけ。

   REQUIRED: tokens.css (--t-*)。門の塗りボタンを置く面は controls.css (ButtonLink が import する)。
   使う page はこの CSS を <link> する (React entry の index.html)。 */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--t-sp-2);
  padding: var(--t-sp-6) var(--t-sp-4);
  text-align: start;
  font-family: var(--t-font-sans);
  color: var(--t-muted);
}

/* 器が既に gutter を持つ面だけ (節・card の中)。重ねると空状態だけが一段内側へ寄る。 */
.empty-state--flush {
  padding-left: 0;
  padding-right: 0;
}

.empty-state__icon {
  display: inline-flex;
  margin-bottom: var(--t-sp-1);
  color: var(--t-fg-soft);
}

.empty-state__title {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--t-fg);
}

.empty-state__desc {
  margin: 0;
  max-width: 34em;
  font-size: 14px;
  line-height: 20px;
  color: var(--t-muted);
}

/* 次の一手 = 文字リンク 1 つ。⚠ 塗りも枠も持たないので、44 の床を敷いても見た目は動かない。
   ⚠ `<a>` と `<button>` の両方に当たる — button の UA 既定 (塗り・枠・padding・font) を明示で消す。 */
.empty-state__action {
  display: inline-flex;
  align-items: center;
  min-height: var(--t-tap-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--t-fg);
  font-family: inherit;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.empty-state__action:hover { text-decoration: underline; }
.empty-state__action:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.empty-state__action:disabled { color: var(--t-muted); cursor: default; text-decoration: none; }

/* 門 (サインイン / claim) の塗りボタンだけの置き場 (hub 裁定 ④ 2026-09-26)。 */
.empty-state__gate {
  margin-top: var(--t-sp-2);
}