/* 出典: dev-common-lib/js/ui/region-tags/ui-region-tags.css (コピー)
   取得: 2026-10-02 / commit 2e2e7cb
   ローカル改変: なし */

/* ============================================================
   領域の名前と ID（ui-region-tags.js が貼る）

   不具合報告で「どの領域の話か」を突き止める往復を消すためのもの。各領域の
   隅に、名前・ID・コピーボタンを薄く置く。押すと報告用の1行が入る。

   置き方の決めごと:
   ・**文字は素通し**（pointer-events: none）。押せるのはアイコンだけ。
     常時出ているものが下の中身のクリックを奪うと、機能の邪魔になる
   ・既定は薄い。領域にポインタが入ると少し濃く、アイコンに乗ると完全に濃く
     なって、隠れていた名前と ID が読める幅まで開く（.is-hot）
   ・.is-hot のときだけ下地を敷く。読めない色の上に字だけ置くと読めない
   ・消すのは body.ui-region-tags-off

   色はホスト側の変数を使う。**無い場合の既定を必ず添えてある**ので、
   デザイントークンを持たない画面にそのまま置いても読める。
   合わせるなら次を定義する:
     --uitag-fg      薄いときの字の色（既定 --text-dim）
     --uitag-fg-hot  濃いときの字の色（既定 --text）
     --uitag-bg      ふちどりに使う地の色（既定 --bg）
     --uitag-panel   下地の色（既定 --panel）
     --uitag-border  下地の枠の色（既定 --border）
     --uitag-accent  アイコンに乗ったときの色（既定 --accent）
     --uitag-ok      コピーできたときの色
     --uitag-warn    規格が付いていない領域の色（既定 --warn）
   ============================================================ */
.ui-region-tag {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: calc(100% - 8px);
  font-size: 10.5px;
  line-height: 1.25;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--uitag-fg, var(--text-dim, #8a8a8a));
  pointer-events: none;
  opacity: 0.38;
  /* 薄いままでも読めるように、地の色で1周ふちどる。濃くするのではなく、
     下の本文や罫線と混ざらないようにするための影。 */
  text-shadow:
    0 0 3px var(--uitag-bg, var(--bg, #fff)),
    0 0 2px var(--uitag-bg, var(--bg, #fff)),
    0 0 1px var(--uitag-bg, var(--bg, #fff));
  transition: opacity 0.12s ease;
}
.ui-region-tag--tr { top: 2px; right: 4px; }
.ui-region-tag--br { bottom: 2px; right: 4px; }
/* 左隅では、アイコンが隅側（左）に来るように並びを返す。 */
.ui-region-tag--tl { top: 2px; left: 4px; flex-direction: row-reverse; }
.ui-region-tag--bl { bottom: 2px; left: 4px; flex-direction: row-reverse; }

.ui-region-tag-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
  max-width: 20em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 貼るのは ID と規格。名前は「どれのことか」を思い出すための添え物なので、
   ID を主役にして、名前はそれより引く。 */
.ui-region-tag-name { opacity: 0.78; }
.ui-region-tag-id { letter-spacing: 0.015em; }

/* 規格。場所（ID）と別物だと一目で分かるよう角括弧で囲み、ID より少し引く。
   **未指定はむしろ目立たせる** — パターン化の抜けなので、隠すと直らない。 */
.ui-region-tag-spec { opacity: 0.72; }
.ui-region-tag-spec::before { content: "["; }
.ui-region-tag-spec::after { content: "]"; }
.ui-region-tag-spec.is-missing {
  opacity: 1;
  color: var(--uitag-warn, var(--warn, #d98634));
}

.ui-region-tag-btn {
  pointer-events: auto;
  flex: none;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  padding: 1px 2px;
  color: inherit;
  cursor: pointer;
}

/* 領域の上にポインタが在るあいだは、読める濃さまで上げて下地も敷く
   （そのとき読みたいのはその領域の名前と ID なので、薄いまま置かない）。 */
[data-uiid]:hover > .ui-region-tag {
  opacity: 1;
  color: var(--uitag-fg-hot, var(--text, #222));
}
[data-uiid]:hover > .ui-region-tag .ui-region-tag-text {
  max-width: none;                      /* 省略していた続きもここで出す */
  background: var(--uitag-panel, var(--panel, #f4f4f4));
  border: 1px solid var(--uitag-border, var(--border, #ccc));
  border-radius: 5px;
  padding: 1px 5px;
}

/* **内側が当たっているときは、外側は薄いまま。** 領域は入れ子なので、
   素通しにすると子に乗っただけで親・祖父のバッジまで一緒に濃くなる
   （画面のあちこちが点く）。当てたい1つだけを濃くする。 */
[data-uiid]:has([data-uiid]:hover) > .ui-region-tag {
  opacity: 0.38;
  color: var(--uitag-fg, var(--text-dim, #8a8a8a));
}
[data-uiid]:has([data-uiid]:hover) > .ui-region-tag .ui-region-tag-text {
  max-width: 20em;
  background: transparent;
  border: 0;
  padding: 0;
}

/* アイコンに乗ったとき＝押せばコピーされる合図。下地は領域ホバーで既に
   敷いてあるので、ここで変えるのは縁と印の色だけ。
   **詳細度を領域ホバーより上に置く** — 同じ .ui-region-tag-text を指すので、
   単独で書くと上の `[data-uiid]:hover > …` に負けて縁が戻る。 */
.ui-region-tag.is-hot {
  opacity: 1;
  color: var(--uitag-fg-hot, var(--text, #222));
}
.ui-region-tag.is-hot .ui-region-tag-text,
[data-uiid]:hover > .ui-region-tag.is-hot .ui-region-tag-text {
  max-width: none;
  background: var(--uitag-panel, var(--panel, #f4f4f4));
  border: 1px solid var(--uitag-accent, var(--accent, #4a90d9));
  border-radius: 5px;
  padding: 1px 5px;
}
.ui-region-tag.is-hot .ui-region-tag-btn { color: var(--uitag-accent, var(--accent, #4a90d9)); }

/* :has() を持たない画面では規則ごと落ちる。**同じ列に並べない** — 並べると
   落ちたときに上の指定まで一緒に消える（セレクタの並びは1つでも無効だと
   規則全体が無効になる）。落ちて困るのは「内側だけ濃く」だけで済ませる。 */
[data-uiid]:has([data-uiid]:hover) > .ui-region-tag.is-hot {
  opacity: 1;
  color: var(--uitag-fg-hot, var(--text, #222));
}
[data-uiid]:has([data-uiid]:hover) > .ui-region-tag.is-hot .ui-region-tag-text {
  max-width: none;
  background: var(--uitag-panel, var(--panel, #f4f4f4));
  border: 1px solid var(--uitag-accent, var(--accent, #4a90d9));
  border-radius: 5px;
  padding: 1px 5px;
}
.ui-region-tag.is-copied { opacity: 1; }
.ui-region-tag.is-copied .ui-region-tag-btn { color: var(--uitag-ok, #3bd671); }

body.ui-region-tags-off .ui-region-tag { display: none; }
@media print { .ui-region-tag { display: none; } }