/* 基数変換（汎用基数 / 巨大基数）のレイアウト。部品（yt-*）とトークンは /src/lib.css・/src/chrome.css。

   配置は基数列変換（/tools/base/base.css）を踏襲する（CSS はツールごとに持つので写してある）。
   - 1 画面完結（main.yt-fit で body のスクロールを止める）。
   - 常時見えるのは「変換前後の基数・入れ替え・変換モード・入力・出力」だけ。表記まわりは
     チップから開くポップオーバー（.bb-panel）に畳む。

   幅による切り替えは 2 段階。
   - 720px 以下: 基数の 2 行を 1 行に、変換モードとチップを全幅に、入出力は縦積み。
   - 640px 以下: タップ領域を 44px 以上にする（部品の拡大は /src/lib.css）。 */

.bb-main {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-3);
}

/* ============ 上部バー（基数・変換モード・表記チップ） ============ */

.bb-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}

.bb-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.bb-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* 幅は基数列変換（input.bc-radix）と同じ。巨大な基数ははみ出すが、それでよい。 */
input.bb-radix {
  width: 80px;
  flex: 0 0 auto;
}

.bb-unit {
  font: 500 13px/20px var(--font-sans);
  color: var(--ink-2);
  white-space: nowrap;
}

.bb-chip {
  display: flex;
  width: 100%;
  text-align: left;
}

.bb-chip .yt-chip__peek {
  flex: 1 1 auto;
}

/* ============ 入出力欄 ============ */

.bb-panes {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}

.bb-panes .yt-io__area {
  min-height: 0;
}

/* ============ 警告・エラー ============ */

.bb-note {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 20px;
}

.bb-note__msgs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  min-width: 0;
}


/* ============ 表記のポップオーバー ============ */

.bb-panel {
  display: none;
  position: absolute;
  z-index: 3;
  /* top は main.js がチップの真下に合わせる（下の値は JS が動く前の目安） */
  top: 104px;
  right: var(--space-6);
  width: 480px;
  max-width: calc(100% - 2 * var(--space-6));
  /* .bb-main が overflow:hidden なので、縦の狭い画面では中で送る。 */
  max-height: calc(100% - var(--bb-panel-top, 104px) - 12px);
  overflow: auto;
}

.bb-panel.is-open {
  display: flex;
}

.bb-panel__sec,
.bb-panel__checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bb-panel__sec[hidden] {
  display: none;
}

/* 桁区切りの 5 つの部品。見本（a'b'c）の並びと同じ順に置く。 */
.bb-format {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.bb-format .yt-label {
  margin-bottom: var(--space-1);
  font-size: 12px;
  white-space: nowrap;
}

.bb-format .yt-input {
  width: 100%;
}

.bb-panel__hint {
  margin: 0;
  font: 400 12px/18px var(--font-sans);
  color: var(--ink-3);
}

/* ポップオーバーの覆い。PC では出さない（外側クリックで閉じる配線は main.js）。 */
.bb-scrim {
  display: none;
}

/* ============ 幅 720px 以下 ============ */

@media screen and (max-width: 720px) {
  .bb-main {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-2);
  }

  /* .bb-side を透過させて、基数の 2 行を 1 行に並べ、変換モードとチップをその下に全幅で置く */
  .bb-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .bb-side {
    display: contents;
  }

  .bb-row {
    flex: 1 1 0;
  }

  .bb-bar .yt-seg,
  .bb-chip {
    flex: 1 0 100%;
  }

  .bb-bar .yt-seg {
    order: 8;
  }

  .bb-chip {
    order: 9;
  }

  .bb-panes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
  }

  .bb-note {
    flex-direction: column;
    gap: var(--space-1);
  }

  .bb-panel {
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    max-width: none;
  }

  .bb-format {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 外側のタップで閉じる（配線は main.js） */
  .bb-scrim.is-open {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.2);
  }
}

/* ============ 幅 640px 以下 ============ */

@media screen and (max-width: 640px) {
  input.bb-radix {
    width: 64px;
  }
}