/**
 * 同意の札。
 *
 * **色を変数に頼らない。** 配色の変数は `index.html` にしか無く、
 * 規約・ポリシー・問い合わせの3枚は自前の style を持っている ——
 * 変数を使うと、そこだけ色の付かない札が出る。値は `src/lib/theme.ts` と同じ。
 *
 * **下端に出す。** 上に出すと読み始めの文章を隠す。画面を覆わないので、
 * 答えずに読み進められる(答えるまで何も送っていない)。
 */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.9rem clamp(1rem, 5vw, 2rem) calc(0.9rem + env(safe-area-inset-bottom));
  background: #17191b;
  border-top: 1px solid #34393d;
  color: #eef0ee;
  font: 400 14px/1.7 -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.consent__t {
  margin: 0;
  flex: 1 1 22rem;
}

.consent__s {
  display: block;
  color: #8b9299;
  font-size: 13px;
}

.consent__s a {
  color: #8b9299;
}

.consent__b {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/** **押せる大きさにする。** 44px は指で外さない下限 */
.consent__btn {
  min-height: 44px;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 999px;
  /* アプリの配色に合わせる(theme.act / theme.actInk)。**押させたい面は反転** */
  background: #eef0ee;
  color: #000000;
  font: 700 14px/1 inherit;
  font-family: inherit;
  cursor: pointer;
}

/** 断る方も**同じ大きさで、同じ場所に**置く。押しにくくしない */
.consent__btn--ghost {
  background: transparent;
  color: #eef0ee;
  border: 1px solid #34393d;
}

@media (prefers-reduced-motion: no-preference) {
  .consent {
    animation: consent-in 0.18s ease-out;
  }
  @keyframes consent-in {
    from {
      transform: translateY(100%);
    }
  }
}