/* 管理者・専門職画面とユーザー設定のボタン。高さを役割ごとにそろえる。 */
#wrap.admin,
#wrap.user-setting-layout {
  --admin-button-height: 44px;
  --admin-link-button-height: 40px;
  --admin-row-button-height: 32px;
  --admin-interview-button-width: 240px;
}

#wrap.admin button.fs-medium,
#wrap.admin button.fs-small,
#wrap.user-setting-layout button.fs-medium,
#wrap.user-setting-layout button.fs-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

#wrap.admin button.fs-medium,
#wrap.user-setting-layout button.fs-medium {
  min-height: var(--admin-button-height);
  padding-top: 10px;
  padding-bottom: 10px;
}

#wrap.admin button.fs-small,
#wrap.user-setting-layout button.fs-small {
  min-height: var(--admin-row-button-height);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* 保存・公開などの操作欄と、ポップアップ内の実行・キャンセルは同じ高さにする。 */
#wrap.admin :is(
  .admin-action-row, .dashboard-card-action, .cycle-create-actions,
  .user-wizard__footer, .user-wizard__success-actions,
  .attr-modal__footer, .custom-question-modal__footer
) button.fs-small {
  min-height: var(--admin-button-height);
  padding-top: 10px;
  padding-bottom: 10px;
}

#wrap.admin .dashboard-link-button,
#wrap.admin .doctor-record-back-link,
#wrap.admin .doctor-screen-head__actions > a.type-004,
#wrap.admin a > button.fs-medium {
  min-height: var(--admin-link-button-height);
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.4;
}

#wrap.admin .admin-row-button {
  min-height: var(--admin-row-button-height);
}

/* 面接指導の2つの一覧で共通。左の16pxをアイコン用に固定し、残りの幅で文言を中央に揃える。
   SVGの状態アイコンとdata-button-iconの疑似要素（詳細・勧奨メール）も同じ位置にする。 */
#wrap.admin :is(#doctorInterviewTable, #adminInterviewTable) .admin-row-button {
  display: inline-grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 6px;
  row-gap: 0;
  align-items: center;
  padding-inline: 10px;
}

#wrap.admin :is(#doctorInterviewTable, #adminInterviewTable) .admin-row-button > .next-action-icon,
#wrap.admin :is(#doctorInterviewTable, #adminInterviewTable) .admin-row-button[data-button-icon]::before {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

#wrap.admin :is(#doctorInterviewTable, #adminInterviewTable) .admin-row-button > span {
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  min-width: 0;
  text-align: center;
  white-space: normal;
}

/* 一覧の操作欄に置く画面移動のリンク（実施回一覧の「定期実施の設定」など）は、隣のボタンと同じ補助のボタンの形にする。 */
#wrap.admin :is(.admin-list-actions, [data-list-column-controls]) > a.type-003 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--admin-button-height);
  padding: 10px 24px;
  border: 1px solid #c5cdd8;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-size: calc(15px * var(--font-scale, 1));
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

#wrap.admin :is(.admin-list-actions, [data-list-column-controls]) > a.type-003:hover,
#wrap.admin :is(.admin-list-actions, [data-list-column-controls]) > a.type-003:focus-visible {
  border-color: #9aa5b4;
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  text-decoration: none;
  transform: translateY(-1px);
}

/* カード見出しの右端に置くときは、隣の fs-small のボタンと同じ高さ・文字の大きさにする。 */
#wrap.admin :is(.admin-list-actions, [data-list-column-controls]) > a.type-003.fs-small {
  min-height: var(--admin-row-button-height);
  padding: 5px 24px;
  font-size: calc(13px * var(--font-scale, 1));
}

/* 一覧に項目を追加する操作は、画面をまたいで一覧の上・右側にそろえる。 */
#wrap.admin .admin-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

/* 操作の種類を data-button-icon で指定し、文字の左に同じ大きさのアイコンを添える。
   空の疑似要素を使うため、読み上げ名や textContent による文言の更新に影響しない。 */
body:has(#wrap.admin, #wrap.user-setting-layout) :is(button, a, summary)[data-button-icon]:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body:has(#wrap.admin, #wrap.user-setting-layout) :is(button, a, summary)[data-button-icon]::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--admin-button-icon) center / contain no-repeat;
          mask: var(--admin-button-icon) center / contain no-repeat;
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="edit"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m16 3 5 5L8 21H3v-5L16 3Zm-2 2 5 5M3 21h18"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="delete"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="record"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H5v16h14V5h-4M9 3h6v4H9zM12 11v6M9 14h6"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="view"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>');
}

/* 詳細ポップアップはⓘ、行内展開は＋／−で、画面遷移の矢印と区別する。 */
body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="info"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) summary[data-button-icon="expand"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>');
  list-style: none;
  cursor: pointer;
}

body:has(#wrap.admin, #wrap.user-setting-layout) summary[data-button-icon="expand"]::-webkit-details-marker {
  display: none;
}

body:has(#wrap.admin, #wrap.user-setting-layout) details[open] > summary[data-button-icon="expand"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round"><path d="M5 12h14"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) summary .admin-disclosure-hide,
body:has(#wrap.admin, #wrap.user-setting-layout) details[open] > summary .admin-disclosure-show {
  display: none;
}

body:has(#wrap.admin, #wrap.user-setting-layout) details[open] > summary .admin-disclosure-hide {
  display: inline;
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="send"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m21 3-6 18-4-8-8-4L21 3ZM11 13l10-10"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="settings"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h4m4 0h8M4 12h10m4 0h2M4 18h2m4 0h10"/><circle cx="10" cy="6" r="2"/><circle cx="16" cy="12" r="2"/><circle cx="8" cy="18" r="2"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="archive"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v5H3zM5 8v13h14V8M9 12h6"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="save"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h15l3 3v15H3V3ZM7 3v6h10V3M7 21v-8h10v8M14 5v2"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="add"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16M4 12h16"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="back"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12H4m7-7-7 7 7 7"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="next"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16m-7-7 7 7-7 7"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="cancel"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m6 6 12 12M6 18 18 6"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="check"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m7 12 3 3 7-7"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="publish"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><path d="M3 12h18"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="pause"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9 8v8M15 8v8"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="refresh"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 9a8 8 0 0 0-14-4L3 8m0-5v5h5M4 15a8 8 0 0 0 14 4l3-3m0 5v-5h-5"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="copy"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="8" width="13" height="13" rx="2"/><path d="M16 5V3H3v13h2"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="download"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="chart"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18M7 16v-5M12 16V7M17 16V4"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="list"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6h12M9 12h12M9 18h12M3 6h1M3 12h1M3 18h1"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="upload"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3m-5 5 5-5 5 5M4 16v5h16v-5"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="template"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 8h13v13H8zM16 5V3H3v13h2M11 12h7M11 16h7"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="share"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m9 10.5 6-4M9 13.5l6 4"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="search"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7"/><path d="m15 15 6 6"/></svg>');
}

/* 列メニューは #wrap の外へ追加される。操作名はメニュー内で左にそろえる。 */
body:has(#wrap.admin, #wrap.user-setting-layout) .list-columns-panel__item[data-button-icon] {
  justify-content: flex-start;
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="sort-ascending"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 20V4m-4 4 4-4 4 4M14 6h3M14 12h5M14 18h7"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="sort-descending"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4v16m-4-4 4 4 4-4M14 6h7M14 12h5M14 18h3"/></svg>');
}

/* 並び替え：上向きと下向きの矢印を並べる。 */
body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="reorder"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 20V4M4 8l4-4 4 4M16 4v16m-4-4 4 4 4-4"/></svg>');
}

body:has(#wrap.admin, #wrap.user-setting-layout) [data-button-icon="hide"] {
  --admin-button-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m3 3 18 18M9 5.5A12 12 0 0 1 12 5c6.5 0 10 7 10 7a20 20 0 0 1-3 4M6 6.5A20 20 0 0 0 2 12s3.5 7 10 7a12 12 0 0 0 5-1M10 10a3 3 0 0 0 4 4"/></svg>');
}

/* 共通の確認ダイアログは #wrap の外へ追加されるため、表示中の画面で絞り込む。 */
body:has(#wrap.admin, #wrap.user-setting-layout) .app-dialog__btn {
  min-height: 44px;
}

/* 無効な操作も残し、ボタンを囲む領域でホバーとキーボードの説明を受け付ける。 */
#wrap.admin .admin-row-action-hint {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}
#wrap.admin .admin-row-action-hint > .admin-row-button {
  min-width: 0;
  max-width: 100%;
  padding-block: 4px;
  white-space: normal;
}
#wrap.admin .admin-row-action-hint > [data-individual-reminder] { padding-inline: 6px; }
#wrap.admin .admin-row-action-hint[hidden] { display: none; }
#wrap.admin .admin-row-action-hint:has(> button:disabled) { cursor: not-allowed; }
/* 押せないボタンは、囲む領域でホバーを受け付けるよう、ボタン自身はポインターの対象にしない。 */
#wrap.admin .admin-row-action-hint > button:disabled { pointer-events: none; }
#wrap.admin .admin-row-action-hint > .admin-row-button:disabled {
  pointer-events: none;
  color: #98a2b3;
  border-color: #d9dfe7;
  background: #f7f8fa;
}
#wrap.admin .admin-row-action-hint:focus-visible { outline: 2px solid #3473ba; outline-offset: 2px; border-radius: 4px; }
/* 行の操作の補足と、補足説明の ⓘ（info_tip.js）の吹き出しは同じ見た目にする。 */
:is(.admin-row-action-tooltip, .admin-info-tooltip) {
  position: fixed;
  z-index: 1200;
  width: max-content;
  max-width: min(300px, calc(100vw - 16px));
  padding: 8px 10px;
  border-radius: 6px;
  color: #fff;
  background: #344054;
  box-shadow: 0 3px 12px rgba(16, 24, 40, .16);
  font-size: calc(12px * var(--font-scale, 1));
  line-height: 1.6;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.admin-row-action-tooltip[hidden],
.admin-info-tooltip[hidden] { display: none; }

/* 補足説明の ⓘ（templates/_info_tip.html）。項目名の横に小さく置き、乗せる・選ぶ・押すと吹き出しを出す。
   隣の文字と同じく文字サイズの設定（--font-scale）に合わせて大きさを変え、文字に対する大きさと位置をそろえる。
   大きさは13px前後の項目名に合わせている。ほかの大きさの文字に添えるときは --info-tip-size を指定し直す。
   ログイン画面（#wrap.login）と、利用者の画面の多要素認証の設定（.mfa-settings）でも同じものを使う。 */
:is(#wrap.admin, #wrap.login, #wrap.user .mfa-settings) .admin-info-tip {
  --info-tip-size: calc(15px * var(--font-scale, 1));
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--info-tip-size) + 6px);
  height: calc(var(--info-tip-size) + 6px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

:is(#wrap.admin, #wrap.login, #wrap.user .mfa-settings) .admin-info-tip::before {
  content: "";
  width: var(--info-tip-size);
  height: var(--info-tip-size);
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7h.01"/></svg>') center / contain no-repeat;
}

:is(#wrap.admin, #wrap.login, #wrap.user .mfa-settings) .admin-info-tip:hover,
:is(#wrap.admin, #wrap.login, #wrap.user .mfa-settings) .admin-info-tip[aria-expanded="true"] {
  color: var(--color-primary);
}

:is(#wrap.admin, #wrap.login, #wrap.user .mfa-settings) .admin-info-tip:focus {
  outline: none;
}

:is(#wrap.admin, #wrap.login, #wrap.user .mfa-settings) .admin-info-tip:focus-visible {
  color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 狭い画面とタッチ操作の端末では、小さな操作・リンクにも44pxの高さを確保する。 */
@media (max-width: 760px), (pointer: coarse) {
  #wrap.admin {
    --admin-link-button-height: 44px;
    --admin-row-button-height: 44px;
  }

  #wrap.admin :is(.cycle-modal__close, [role="dialog"] > button[aria-label="閉じる"]) {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }
}