/* ══════════════════════════════════════════════════════════════════════════
   status.css — **상태 점** 하나.

   «색만으로 알리지 않는다» 를 지키는 장치다: 점 + 라벨 + 코드가 늘 함께 간다. 목록·상세가
   함께 쓰고, 판정 낱말(`core/vocabulary.js` 의 `STATES`)과 이름이 짝을 이룬다
   (`is-ok`·`is-dev`·`is-auth`·`is-down`·`is-unchecked`·`is-none`).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 상태 점 ── **색만으로 알리지 않는다**(점 + 라벨 + 코드가 늘 함께 간다).
   목록 CSS 에 있던 탓에 상세에서는 폭 0px 으로 안 보였다(실측) — 상세는 페이지 CSS 가
   없어 `links.css` 를 싣지 않는데, 그 화면의 JS 는 이 클래스를 찍고 있었다.

   `display` 를 명시한다: 목록에서는 격자 칸이라 없어도 됐지만, 상세에서는 인라인 스팬이라
   너비·높이가 먹지 않는다. 격자 칸은 어차피 블록으로 바뀌므로 두 화면 모두 같아진다. */
.dot {
	display: inline-block;
	flex: none;
	width: 7px;
	height: 7px;
	border: 1px solid currentColor;
	background: currentColor;
}

.dot.is-ok { color: var(--ok); }
.dot.is-dev { color: var(--idle); background: transparent; }
.dot.is-auth { color: var(--warn); background: transparent; }
.dot.is-down { color: var(--bad); }
.dot.is-unchecked { color: var(--line-strong); background: transparent; }
/* 주소가 아예 없는 자리(`slotState` 의 `none`). **채운 회색**이다 — 빈 네모는 「미확인」이
   이미 쓰고 있고, 그 둘은 다른 사실이다(«아직 안 재 봤다» 대 «잴 주소가 없다»).
   상태색(초록·황·빨강·회색 idle)과도 겹치지 않게 본문 흐린 잉크를 그대로 쓴다. */
.dot.is-none { color: var(--fg-3); }