/* ---------------------------------------------------------------
 * フロア選択（ビジュアル版）
 *
 * JR東日本の駅構内図閲覧サイトのように、フロアを上から順に
 * 積み上げたボタンで選びます。数字だけでは枠が分からないので、
 * 左に階記号、右に名前を書きます。
 *
 * 選択中の値は <select id="floorSelect"> が保持します。その
 * セレクタは JavaScript が動くまでは表示し、動いた後は隠します。
 * 視覚的にはこのファイルで描くボタンだけが見えます。
 * --------------------------------------------------------------- */

.floor-picker {
  display: flex;
  flex-direction: column;
  gap: calc(2 / 16 * 1rem);
}

.floor-picker__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(8 / 16 * 1rem);
  width: 100%;
  min-height: calc(44 / 16 * 1rem);   /* タップ領域 44px 以上 */
  padding: calc(6 / 16 * 1rem) calc(10 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-300);
  border-left: 6px solid var(--color-neutral-solid-gray-300);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  font-size: calc(14 / 16 * 1rem);
  text-align: left;
  cursor: pointer;
}

.floor-picker__item:hover {
  background-color: var(--color-neutral-solid-gray-100);
}

/* 選択中のフロア */
.floor-picker__item[aria-checked="true"] {
  border-color: var(--color-key-600);
  border-left-color: var(--color-key-600);
  background-color: var(--color-key-50);
  color: var(--color-key-1000);
  font-weight: bold;
}

/* 階番号（2 / 1 / B1 …） */
.floor-picker__level {
  min-width: calc(28 / 16 * 1rem);
  font-family: var(--font-family-mono);
  font-size: calc(16 / 16 * 1rem);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.floor-picker__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* フロア図が未設定のもの */
.floor-picker__item--nomap {
  color: var(--color-neutral-solid-gray-536);
  border-style: dashed;
}

.floor-picker__state {
  font-size: calc(12 / 16 * 1rem);
  white-space: nowrap;
}

/* 地図の横に置く場合は縦に並べる */
.floor-picker--inline {
  min-width: calc(180 / 16 * 1rem);
}

/* ---------------------------------------------------------------
 * 路線選択
 *
 * フロア選択の上段に置く。JR / 京王線 … のように路線を先に選び、
 * その路線のフロアを下で選ぶ 2 段構えにします。
 * 路線の色はデータ（lineGroups）の color を使います。
 * --------------------------------------------------------------- */

.line-picker {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 / 16 * 1rem);
}

.line-picker__item {
  --_line-color: var(--color-neutral-solid-gray-536);

  min-height: calc(36 / 16 * 1rem);
  padding: calc(2 / 16 * 1rem) calc(12 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-300);
  border-bottom: 4px solid var(--_line-color);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
  font: inherit;
  font-size: calc(14 / 16 * 1rem);
  cursor: pointer;
}

.line-picker__item:hover {
  background-color: var(--color-neutral-solid-gray-100);
}

.line-picker__item[aria-checked="true"] {
  border-color: var(--_line-color);
  background-color: var(--color-neutral-solid-gray-100);
  font-weight: bold;
}

/* 出発地・目的地の路線ボタン。フロア選択の路線ボタンより小さく */
.line-picker--small {
  gap: calc(4 / 16 * 1rem);
}

.line-picker--small .line-picker__item {
  min-height: calc(32 / 16 * 1rem);
  padding: calc(2 / 16 * 1rem) calc(10 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
}

/* 高コントラストモード */
@media (forced-colors: active) {
  .floor-picker__item {
    border-color: CanvasText;
    color: CanvasText;
    background-color: Canvas;
  }

  .floor-picker__item[aria-checked="true"] {
    background-color: Highlight;
    color: HighlightText;
  }

  .floor-picker__item--nomap {
    border-color: GrayText;
    color: GrayText;
  }

  .line-picker__item {
    border-color: CanvasText;
    background-color: Canvas;
    color: CanvasText;
  }

  .line-picker__item[aria-checked="true"] {
    background-color: Highlight;
    color: HighlightText;
  }
}