/* One Eye (one-eye.js): One's waking emblem, the left half of the Console's "One / Genesis" header lockup.
 * Ported from the One website's waking logomark (components/ui/waking-logo.module.css, logo.tsx StillEmblem and
 * app/one-system.css tokens; see README.md). One is always the black circle, on every surface:
 *   light: the disc (#141b16) with the bar knocked out to the surface behind it;
 *   dark (html.dark): the black disc keeps a chalk rim, 1 CSS px inside its edge, and a chalk bar.
 * Size it with --one-eye-size (default 20px). --one-eye-surface must be the colour the emblem sits on (the rail). */
.one-eye {
  --one-eye-size: 20px;
  --one-eye-disc: #141b16;
  --one-eye-chalk: #f2f1ea;
  --one-eye-surface: var(--rail, var(--canvas, #fff));
  --one-eye-fg: var(--one-eye-surface);
  --one-eye-rim-on: 0%;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--one-eye-size);
  height: var(--one-eye-size);
  line-height: 0;
  vertical-align: middle;
  border-radius: 50%;
}
.dark .one-eye { --one-eye-fg: var(--one-eye-chalk); --one-eye-rim-on: 100%; }
.one-eye__still { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.one-eye__cut { fill: var(--one-eye-disc); }
.one-eye__rimmed { display: none; }
.one-eye__disc { fill: var(--one-eye-disc); }
.one-eye__bar { fill: var(--one-eye-chalk); }
.dark .one-eye__cut { display: none; }
.dark .one-eye__rimmed { display: inline; }
/* The chalk rim on dark surfaces, for the still and the live eye alike (the parade draws its own). */
.one-eye::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--one-eye-chalk) var(--one-eye-rim-on), transparent);
}
.one-eye[data-parading]::after { box-shadow: none; }
/* The live agent-eye sits exactly over the still emblem; the still one steps aside once it has drawn a frame. */
.one-eye__slot { position: absolute; inset: 0; pointer-events: none; }
.one-eye[data-awake] .one-eye__still { visibility: hidden; }
.one-eye__live {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  --agent-eye-size: 100%;
  --agent-eye-bg: var(--one-eye-disc);
  --agent-eye-fg: var(--one-eye-fg);
}
/* The parade's layer (one-eye-parade.js createParadeLayer): one emblem's width of room left, right and above, in
   whole CSS px, never laid out; its inline style (CSSOM) sets the offsets. */
.one-eye__parade { position: absolute; max-width: none; overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .one-eye__live, .one-eye__parade { display: none; }
  .one-eye[data-awake] .one-eye__still { visibility: visible; }
}
@media (forced-colors: active) {
  .one-eye, .one-eye__live { forced-color-adjust: none; }
  .one-eye::after { box-shadow: none; }
  .one-eye__cut, .dark .one-eye__cut { display: inline; fill: CanvasText; }
  .dark .one-eye__rimmed { display: none; }
  .one-eye__live { --agent-eye-bg: CanvasText; --agent-eye-fg: Canvas; }
}