/* 全ページが読む共通の土台（src/page.html から読む）。見た目は T-139〜T-142 が、配置は各画面のタスクがここへ足す。 */

/* 背景は白、文字は共通の文字の色（第 6 章「色」。値は役割の定義 colors.css） */
body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* 押せるものは 24 px 四方以上（WCAG 2.2 の 2.5.8。仕様書 第 6 章） */
a,
button {
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
}

/* ストップの番号の形（F11-6 (1)、案J）。全サイト共通の形を主色で透かさずに塗り、上の番号は白。
   置くのはストップ一覧・☰ の一覧・ストップの画面・案内だけのページの番号で、プレイヤーと番号の入力欄には付けない。
   形は ::before の mask で切り抜き（色の値を書かずに役割の変数で塗るため）、大きさは文字に合わせて em で決める
   （案J の 45 px に 21 px、36 px に 17 px、28 px に 13 px の比）。文字の大きさは置く所ごとに決める */
.number-shape {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.15em;
  height: 2.15em;
  margin: 0;
  color: var(--color-on-primary);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.number-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -2 102 104'%3E%3Cpath d='M57 0 C78 0 92 10 97 30 C102 50 100 70 92 78 C84 88 66 92 52 98 C38 104 26 100 16 86 C6 72 0 58 0 47 C0 34 10 24 22 15 C33 7 44 0 57 0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -2 102 104'%3E%3Cpath d='M57 0 C78 0 92 10 97 30 C102 50 100 70 92 78 C84 88 66 92 52 98 C38 104 26 100 16 86 C6 72 0 58 0 47 C0 34 10 24 22 15 C33 7 44 0 57 0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 番号の形の文字の大きさ（案J）: ストップの画面と案内だけのページ 21 px、ストップ一覧 17 px、☰ の一覧 13 px */
.stop-number.number-shape,
.stop-info-only-number.number-shape {
  font-size: 1.3125rem;
}

.stop-list .number-shape {
  font-size: 1.0625rem;
}

.menu-stops .number-shape {
  font-size: 0.8125rem;
}

/* 文字の大きさ（仕様書 F1-10）。src/js/text-size.js が <html> に置く印で根の文字を替える。
   文字は rem・em で書く（px で固定しない）ので、全画面（プレイヤー・☰ を含む）に効く */
html[data-text-size="large"] {
  font-size: 125%;
}

html[data-text-size="xlarge"] {
  font-size: 150%;
}