/* Flows Timer Dial — squircle tile with tick perimeter + water fill
   Ported from design system preview/component-dial.html */

.tile {
  --flow: #8B7CFF;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 36px;
  background: #141418;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  cursor: pointer;
}
.tile.active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px color-mix(in oklab, var(--flow) 35%, transparent),
    0 18px 40px color-mix(in oklab, var(--flow) 22%, transparent);
}
.tile.cyan   { --flow: #2BB2C8; }
.tile.green  { --flow: #4FB28A; }
.tile.indigo { --flow: #6366F1; }
.tile.amber  { --flow: #FFB454; }
.tile.purple { --flow: #A99BFF; }

.tile .water { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; transition: height .65s var(--ease-smooth, cubic-bezier(0.22,0.61,0.36,1)); }
.tile .water svg { width: 100%; height: 100%; display: block; }
.tile .ticks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

.tile .core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18% 8% 14%; gap: 1px; z-index: 3; }
.tile .core .name { font: 700 14px/16px var(--font-rounded); color: var(--flow); }
.tile .core .name.muted { color: var(--fg-2); }
.tile .core .big { font: 800 30px/34px var(--font-rounded); color: var(--fg-1); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; margin-top: 4px; }
.tile .core .big.muted { color: var(--fg-3); }
.tile .core .cap { font: 500 10px var(--font-rounded); color: var(--fg-3); margin-top: 10px; }
.tile .core .mid { font: 700 14px/18px var(--font-rounded); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.tile .core .resting-msg { font: 500 11px var(--font-rounded); color: var(--fg-3); margin-top: 6px; }

/* tile in the small phone-mock context — scale down sizes */
.phone-screen .tile { border-radius: 22px; }
.phone-screen .tile .core { padding: 16% 8% 12%; }
.phone-screen .tile .core .name { font-size: 10px; line-height: 12px; }
.phone-screen .tile .core .big { font-size: 18px; line-height: 20px; margin-top: 2px; letter-spacing: -.3px; }

/* size variants on landing chess-clock demo */
.cc-tile .core .name { font-size: 13px; }
.cc-tile .core .big { font-size: 26px; line-height: 30px; }