/* docs/stylesheets/extra.css
   mdx-badge: 本家 Material for MkDocs の _typeset.scss に準拠したバッジスタイル

   設計方針:
   - カラーはテーマの --md-accent-fg-color / --md-accent-fg-color--transparent に一任
   - 型の区別はアイコンの形のみで行い、色分けはしない
   - 構造・サイズ・余白は本家 SCSS に準拠
*/

/* バッジブロック（独立行に配置する wrapper） */
.md-typeset .mdx-badge-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-bottom: 1em;
}

/* バッジ共通 */
.md-typeset .mdx-badge {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  font-size: 0.85em;
}

/* アイコン領域
   - 左端 2px 角丸
   - background でテーマアクセント色の薄い塗り
   - アイコン単体のとき（:last-child）は全辺を角丸にする */
.md-typeset .mdx-badge__icon {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem;
  background-color: var(--md-accent-fg-color--transparent);
  border-start-start-radius: 0.125rem;
  border-end-start-radius: 0.125rem;
  color: var(--md-accent-fg-color);
}

.md-typeset .mdx-badge__icon:last-child {
  border-radius: 0.125rem;
}

.md-typeset .mdx-badge__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}

/* テキスト領域
   - 右端 2px 角丸
   - inset box-shadow でアイコン背景と同色の枠線を再現（border なし）
   - 文字色はページの通常テキスト色 */
.md-typeset .mdx-badge__text {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.375rem;
  border-start-end-radius: 0.125rem;
  border-end-end-radius: 0.125rem;
  box-shadow: 0 0 0 1px inset var(--md-accent-fg-color--transparent);
  color: var(--md-default-fg-color);
}


/* 「このページは役に立ちましたか？」の見た目（#91 / PR #94 の指摘） --------------
 *
 * ★ テーマ既定では、選択肢の名前が button の title 属性にしか入らない。
 *   マウスを載せないと読めず、タッチ端末では読めない。
 *   DOM に文字が無いので、`content: attr(title)` で見えるようにする。
 *
 * ★ あわせて押し間違いを防ぐため、2つのボタンの間隔を広げ、
 *   当たり判定そのものも大きくする（タップの目安 44px を確保）。
 */
.md-feedback__list {
  gap: 1.5rem;                 /* 既定は margin 0 .1rem しかなく近すぎる */
  align-items: stretch;
}

.md-feedback__icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin: 0;
  min-width: 5.5rem;
  min-height: 2.2rem;          /* 44px 相当。タップしやすくする */
  padding: 0.4rem 0.6rem;
  border-radius: 0.2rem;
  line-height: 1.3;
}

/* 選択肢の名前を文字として出す。mkdocs.yml の ratings[].name が title に入る */
.md-feedback__icon::after {
  content: attr(title);
  font-size: 0.64rem;
  white-space: nowrap;
}

.md-feedback__icon:not(:disabled):hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* 押したあとは操作できないことが分かるようにする */
.md-feedback__icon:disabled {
  cursor: default;
}

/* 画面が狭いときは縦に積む */
@media screen and (max-width: 29.9375em) {
  .md-feedback__list { gap: 0.75rem; }
}


/* サイドバーのバナー（#102）
   旧マニュアルは各画像の style 属性に直接書いていた（width:100%; margin-bottom:15px）。
   同じ見た目になるようにこちらへ寄せる。
   画面が狭いときサイドバーはドロワーになるが、そこでも同じ幅で出る。 */
.md-sidebar-banner {
  margin: 0.8rem 0.6rem 0.9375rem;   /* 15px = 0.9375rem。ナビとの間を少し空ける */
}

.md-sidebar-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.1rem;
}

/* 印刷には出さない */
@media print {
  .md-sidebar-banner { display: none; }
}