/* atomo-ring.css：ATOMO の印（光の輪）。原本は atomo/AtomoWindow.swift の AtomoMark だ（2026-11-03）
   守ること：中を空けた輪、色、光り方、止めたときの強さ0.55。ここは直さずに写す。
   アプリに合わせてよいのは、--s（大きさ）と、輪のまわり（ボタンの形・縁・字・余白）だ。
   アプリが自分で明暗を切り替えるなら、暗いほうで --atomo-glow: 106 168 255 を指定する */

.atomo-ring {
  --atomo-glow: 58 141 255;  /* #3A8DFF */
  --s: 18px;
  --b: .55;
  --line: max(1.5px, calc(var(--s) * .07));
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  box-sizing: border-box;
  border-radius: 50%;
  border: var(--line) solid rgb(var(--atomo-glow) / calc(.25 + .75 * var(--b)));
  box-shadow:
    0 0 calc((1 + 5 * var(--b)) * var(--s) / 11) rgb(var(--atomo-glow) / var(--b)),
    inset 0 0 calc((1 + 5 * var(--b)) * var(--s) / 22) rgb(var(--atomo-glow) / calc(.6 * var(--b)));
  background: none;
  vertical-align: middle;
  pointer-events: none;
}
.atomo-ring img {
  position: absolute;
  inset: var(--line);
  width: calc(100% - 2 * var(--line));
  height: calc(100% - 2 * var(--line));
  border-radius: 50%;
  object-fit: cover;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .atomo-ring { --atomo-glow: 106 168 255; }
}
:root[data-theme="dark"] .atomo-ring { --atomo-glow: 106 168 255; }