/* 「?」を押す / ホバーすると出る説明の吹き出し ({% dtu_hint %})。dtu-hint.js と対。

   クラスは全て DTU 所有 (.dtu-hint*)。PJ 所有の .card / .form-control 等は再定義しない
   (dtu-card-header.css / dtu-period.css と同じ衝突回避方針)。使わない画面には .dtu-hint が
   無いので no-op。

   見た目は PJ の .card と同じトーン (白面 + 薄いグレーの 1px 罫線 + ごく薄い影)。
   ダークテーマの分岐は作らない (DTU の既存部品に無いため、ここだけ持つと片肺になる)。 */

.dtu-hint {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* 「?」ボタン。button で出す理由 = キーボードで辿れて Enter/Space で開ける
   (i タグに tabindex を足すより素直)。見た目はボタンらしさを消す。

   🚨 min-height は装飾ではなく指で押せる大きさ (WCAG 2.5.8 Target Size Minimum の 24px)。
   文字は 13px・line-height 1 なので、指定しないと**高さ 15px の帯**になり、
   スマホ・タブレットでは狙って押せない (viewport-sweep が 3 画面で tap-target violation を
   実測。2026-08-06)。align-items: center と対で使うこと — 高さだけ伸ばすと文字が上に張り付く。
   padding で稼がない理由 = ? と隣の文字の間隔 (gap) まで一緒に広がるため。 */
.dtu-hint__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #6b7280;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
}

.dtu-hint__btn:hover,
.dtu-hint__btn:focus-visible,
.dtu-hint__btn[aria-expanded="true"] {
  color: #374151;
}

.dtu-hint__btn > i {
  font-size: 1.15em;
  line-height: 1;
}

/* ? の隣に出す短いラベル (任意)。押せることが分かるよう点線の下線を敷く。 */
.dtu-hint__label {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   吹き出し本体 (body 直下に 1 個だけ作って使い回す)
   ------------------------------------------------------------------ */
.dtu-hint-panel {
  --dtu-hint-line: #e5e7eb;

  position: fixed;
  top: 0;
  left: 0;
  z-index: 1080; /* モーダル (1050 系) より上。ヘッダの ? はモーダルの中にも置かれる */
  box-sizing: border-box;
  width: max-content;
  max-width: 22rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--dtu-hint-line);
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 13px;
  line-height: 1.7;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.08);
}

.dtu-hint-panel[hidden] {
  display: none;
}

.dtu-hint-panel__title {
  margin: 0 0 0.25rem;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.dtu-hint-panel__body > :first-child {
  margin-top: 0;
}

.dtu-hint-panel__body > :last-child {
  margin-bottom: 0;
}

.dtu-hint-panel__body ul,
.dtu-hint-panel__body ol {
  margin: 0.25rem 0;
  padding-left: 1.2em;
}

/* 本文中のリンクは色を PJ から継がせ、下線だけ足す (アクセント色を DTU で決め打ちしない)。 */
.dtu-hint-panel__body a {
  text-decoration: underline;
}

/* 矢印。45 度回した正方形の半分を外へ出す。JS (hint.place) が left/top と
   「外へ出す側」の -5px を書き、向きごとの枠線 2 辺をここで引く。 */
.dtu-hint-panel__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: #fff;
}

.dtu-hint-panel[data-placement^="bottom"] .dtu-hint-panel__arrow {
  border-top: 1px solid var(--dtu-hint-line);
  border-left: 1px solid var(--dtu-hint-line);
}

.dtu-hint-panel[data-placement^="top"] .dtu-hint-panel__arrow {
  border-right: 1px solid var(--dtu-hint-line);
  border-bottom: 1px solid var(--dtu-hint-line);
}

.dtu-hint-panel[data-placement^="left"] .dtu-hint-panel__arrow {
  border-top: 1px solid var(--dtu-hint-line);
  border-right: 1px solid var(--dtu-hint-line);
}

.dtu-hint-panel[data-placement^="right"] .dtu-hint-panel__arrow {
  border-bottom: 1px solid var(--dtu-hint-line);
  border-left: 1px solid var(--dtu-hint-line);
}