/* Small shared Cylin components. Needs tokens.css. All classes are prefixed cy- so they never collide with
   an app's own. Source of truth: Cylin/packages/brand/src/components.css; edit it there and sync. */

/* The full stop is the brand: a headline's period rendered as the spark. <span class="cy-dot"></span> */
.cy-dot { display: inline-block; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--cy-spark); margin-left: 0.04em; vertical-align: baseline; transform: translateY(-0.02em); }
.cy-nowrap { white-space: nowrap; }

/* Line-and-dot progress: <div class="cy-track"><b class="done"></b><i class="done"></i><b class="now"></b><i></i><b></b></div> */
.cy-track { display: flex; align-items: center; --cy-track-color: var(--cy-fg); }
.cy-track i { flex: 1; height: 3px; background: var(--cy-border); }
.cy-track b { width: 12px; height: 12px; border-radius: 50%; background: var(--cy-border); flex: none; }
.cy-track b.done, .cy-track i.done { background: var(--cy-track-color); }
.cy-track b.now { background: var(--cy-spark); box-shadow: 0 0 0 4px var(--cy-spark-tint); }

/* App icon image: clip and shadow follow the tile's corner. */
.cy-tile { display: block; flex: none; border-radius: var(--cy-r-tile); }

/* Chips */
.cy-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--cy-r-chip); font: 700 var(--cy-t-14)/1 var(--cy-font-text); background: var(--cy-bg-2); color: var(--cy-fg-2); }
.cy-chip-spark { background: var(--cy-spark-tint); color: var(--cy-spark-ink); }

/* Visually hidden, still read aloud */
.cy-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }