/* Video call kit engine (engine-u21-call-kit.js): ring timer, segmented tabs, small pills. Tokens only, so dark mode works. */

/* Segmented tabs with a sliding pill */
.tool .ck-tabs {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 20px;
  background: rgb(var(--ink) / .06);
}
.tool .ck-tab-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--ck-n, 3)); border-radius: 16px;
  background: var(--surface); box-shadow: 0 2px 8px rgb(var(--ink) / .1);
  transform: translateX(calc(var(--ck-i, 0) * 100%)); transition: transform .35s var(--ease-out);
}
.tool .ck-tab {
  position: relative; min-height: 44px; padding: 0 8px; border-radius: 16px; font-size: 15px; line-height: 20px; font-weight: 800;
  color: rgb(var(--ink) / .55); background: transparent; transition: color .2s ease; -webkit-tap-highlight-color: transparent;
}
.tool .ck-tab[aria-selected="true"] { color: rgb(var(--ink)); }
.tool .ck-tab:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; }

/* Progress ring */
.tool .ck-ring { position: relative; width: var(--ck-size); height: var(--ck-size); max-width: 100%; margin: 0 auto; }
.tool .ck-ring-svg { width: 100%; height: 100%; display: block; }
.tool .ck-ring-bg { stroke: rgb(var(--ink) / .08); }
.tool .ck-ring-fg { stroke: rgb(var(--accent)); transition: stroke-dashoffset .3s linear; }
.tool .ck-ring-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.tool .ck-ring-time { font-size: 44px; line-height: 48px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: rgb(var(--ink)); }
.tool .ck-ring-label { font-size: 13px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .5); letter-spacing: .04em; text-transform: uppercase; }
.tool .is-compact .ck-ring-time { font-size: 28px; line-height: 32px; }
.tool .is-compact .ck-ring-label { font-size: 11px; }

/* Timer controls */
.tool .ck-timer { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tool .ck-timer-ctl { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.tool .ck-timer-ctl .ck-play { flex: 0 1 180px; width: auto; }
.tool .ck-mini {
  min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 22px; font-size: 14px; font-weight: 800;
  background: var(--surface); color: rgb(var(--ink) / .7); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .08);
  transition: transform .2s var(--ease-out), background-color .2s ease;
}
.tool .ck-mini:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .tool .ck-mini:hover { background: var(--surface-2); } }
.tool .is-compact .ck-timer-ctl .ck-play { height: 44px; flex-basis: 120px; }

/* Small meta pills (time, quiet ok, voice ok) */
.tool .ck-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tool .ck-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px; line-height: 16px; font-weight: 800; color: rgb(var(--ink) / .65); background: rgb(var(--ink) / .06); }
.tool .ck-pill.is-accent { color: var(--link); background: rgb(var(--accent) / .12); }

.tool .tool-actions button, .tool .ck-tab, .tool .ck-mini { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
@media (max-width: 599px) {
  .tool .ck-timer-ctl { flex-direction: row; }
  .tool .ck-timer-ctl .btn { width: auto; flex: 1 1 auto; }
}
@media (prefers-color-scheme: dark) { .tool .ck-tabs { background: rgb(0 0 0 / .25); } .tool .ck-tab-pill { background: rgb(var(--ink) / .16); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .12); } }
@media (prefers-reduced-motion: reduce) { .tool .ck-tab-pill, .tool .ck-ring-fg { transition: none; } }