/* 絵文字をやめて線画アイコンにするための土台。M3かどうかに関係なく常に読む */
/* =============================================================
   絵文字をやめて線画アイコンに（icons.js の <svg class="ic">）
   ============================================================= */
.ic {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sm {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}
.bottom-nav .ic { width: 24px; height: 24px; }
.action-icon .ic, .sc-icon .ic, .hm-ico .ic { width: 21px; height: 21px; }
.arrow .ic { width: 20px; height: 20px; stroke-width: 2; }
.text-button .ic, .settings-row .ic, .toolbar .ic { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }
.icon-button .ic { width: 20px; height: 20px; margin: 0 auto; }
.topbar .ic { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; }

/* 通知のレベルは絵文字の丸ではなくCSSの点で出す */
.lv-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--md-outline);
  vertical-align: 1px;
}
.item.lv-critical .lv-dot { background: var(--md-error); }
.item.lv-warn .lv-dot { background: #a06800; }
.item.lv-info .lv-dot { background: var(--md-primary); }

/* =============================================================
   カード左端の太い縦線をやめる（区別は点・見出し・面のトーンで出す）
   ============================================================= */
.item, .mor-card, .sale-txn, .alert-band, .alert-band.critical, .alert-band.warn,
.rb-scan-card, .rb-scan-card.fail, .rb-scan-card.blocked, .rb-dupe, .action-card {
  border-left-width: 0;
  border-left-style: none;
}

/* =============================================================
   下のバーが浮き上がる件の対策
   iOS はソフトキーボードが出ると position:fixed の要素を
   visual viewport に追従させるため、下タブが画面の途中に浮く。
   キーボードが出ている間は下タブを隠す（閉じれば自動で戻る）。
   ============================================================= */
body.kb-open .bottom-nav { display: none; }

/* アイコン＋文字が並ぶ小さなボタンは、折り返さず横並びにする */
.bc-edit, .text-button, .ghost-btn, .detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.bc-edit .ic, .text-button .ic, .ghost-btn .ic, .detail-btn .ic {
  vertical-align: 0;
  width: 16px;
  height: 16px;
}

/* テキストの直前に置くアイコンは、文字とくっつかないよう間を空ける */
.settings-row .ic, .detail-btn .ic, .undeliv .ic { margin-right: 8px; }

/* 文の先頭に置くアイコンは、続く文字と少し離す（アイコンだけのボタンでは相殺する） */
.ic-sm { margin-right: 5px; }
.icon-button .ic-sm, .bottom-nav .ic-sm, .action-icon .ic-sm, .arrow .ic-sm { margin-right: 0; }

/* レベルの色。絵文字（🔴🟠🟢）が持っていた「重大度」をアイコンの色で引き継ぐ */
.ic.lv-critical { color: var(--md-error, #b3261e); }
.ic.lv-warn { color: #a06800; }
.ic.lv-info { color: var(--md-primary, #036b56); }

/* ── 更新ボタンの「押した手応え」──────────────────────────────
   押している間だけ矢印を回す。中身が前と同じだと画面が変わらないので、
   回らないと「効いていない」ようにしか見えない（2026-09-06） */
@keyframes ic-spin { to { transform: rotate(360deg); } }
button.is-busy { opacity: 0.7; }
button.is-busy .ic {
  transform-origin: 50% 50%;
  animation: ic-spin 0.8s linear infinite;
}
/* 失敗したときだけ赤くする（1.5秒） */
button.is-err { color: var(--md-error, #b3261e); border-color: var(--md-error, #b3261e); }

/* 動きが苦手な人の設定を尊重する。回さず薄くするだけにする */
@media (prefers-reduced-motion: reduce) {
  button.is-busy .ic { animation: none; }
  button.is-busy { opacity: 0.45; }
}