/* The app's small pieces, shared by the app shell and the home page's product demo (DESIGN.md):
   the meta separator, project dots and the running entry's pulse, the billable split bar and tags.
   Colours come from the layout's tokens (.shell in shell.css, body.site in site.css, the project
   colours in tokens.css). The kangaroo-head avatars are in avatars.css. */
/* the no-break space keeps each dot at the end of a line, never at the start of the next */
.meta-sep::before { content: "\00a0\00b7\0020"; padding: 0 3px 0 2px; color: var(--text-3); }
/* Dots and the billable split (the signature: billable time is green everywhere) */
.dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; }
.pc-0 { background: var(--p0); } .pc-1 { background: var(--p1); } .pc-2 { background: var(--p2); } .pc-3 { background: var(--p3); } .pc-4 { background: var(--p4); }
.pc-5 { background: var(--p5); } .pc-6 { background: var(--p6); } .pc-7 { background: var(--p7); } .pc-8 { background: var(--p8); } .pc-9 { background: var(--p9); }
/* A running entry's project dot breathes; it shrinks only, so clipped lines never cut it. With
   reduced motion it stays still and the ticking time alone says the timer runs. */
.dot.is-live { animation: dot-live 2.4s ease-in-out infinite; }
@keyframes dot-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
@media (prefers-reduced-motion: reduce) { .dot.is-live { animation: none; } }
.split { display: block; width: 100%; height: 4px; }
.split-rest { fill: #dfe3ec; }
.split-billable { fill: var(--green); }
.tag { display: inline-block; margin: 0; line-height: 1.5; vertical-align: 1px; padding: 1px 8px; border-radius: 999px; background: #eceff5; color: var(--text-2); font-size: 11.5px; font-weight: 700; }
.tag-billed { background: var(--green-wash); color: var(--green-ink); }