/* 부모용 컨트롤. 메뉴(site.css)와 놀이 화면(app.css)이 함께 읽는다.

   두 화면에 같은 칩이 필요한데 각자 갖고 있으면 어긋난다 — tokens.css로 값을
   모은 것과 같은 이유로 컴포넌트도 한 군데 둔다. 허브(/)는 최상위라 뒤로가기가
   없으므로 이 파일을 읽지 않는다.

   칩은 부모용이다. 크고 읽히되 아이의 시선을 끌지 않아야 하므로 무채색이고
   화면 구석에 있다. 크기를 줄여서 아이를 막지 않는다 — 그렇게 하면 부모도
   못 읽는다. */
.chip {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 20;

  /* --tap-parent는 하한이며 예외를 두지 않는다. 라벨이 붙으면 가로로만 늘어난다. */
  min-width: var(--tap-parent);
  height: var(--tap-parent);
  padding: 0 20px 0 14px;
  gap: 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--tap-parent) / 2);
  background: var(--bg-raised);
  border: 1px solid var(--border-raised);
  color: var(--ink-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.chip:active { background: var(--bg-raised-active); }
.chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
}