.block { border-left: 3px solid var(--cat-misc-border); background: var(--cat-misc-fill);
  padding: 4px 8px; margin-bottom: 5px; border-radius: 6px; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  color: var(--ink); font-variant-numeric: tabular-nums;
  transition: filter .12s ease, transform .1s ease, box-shadow .12s ease; }
.block:hover { filter: brightness(.975); box-shadow: 0 1px 4px rgba(22,35,58,.12); }
.block:active { transform: scale(.97); }
.block.synced-readonly { cursor: default; }
.block.synced-readonly:hover { filter: none; box-shadow: none; }
.block.synced-readonly:active { transform: none; }
.block.cat-synced  { background: var(--cat-synced-fill);  border-left-color: var(--cat-synced-border); }
.block.cat-focus   { background: var(--cat-focus-fill);   border-left-color: var(--cat-focus-border); }
.block.cat-meeting { background: var(--cat-meeting-fill);  border-left-color: var(--cat-meeting-border); }
.block.cat-task    { background: var(--cat-task-fill);     border-left-color: var(--cat-task-border); }
.block.cat-misc    { background: var(--cat-misc-fill);     border-left-color: var(--cat-misc-border); }

.overflow-badge { display: inline-block; background: var(--ink); color: #fff;
  border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; border: none; margin-top: 2px; }
.overflow-badge:hover { background: var(--accent); }