/* Shared row primitives cataloged on GitHub issue #175 but never actually
   built until now (#197's audit): a leading slot every row type puts its
   checkbox/avatar into, and the checkbox itself restyled as a circle that
   fills on completion instead of a native checkbox square. */

.row-lead {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.check-circle {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-circle);
  background: none;
  cursor: pointer;
}

.check-circle:checked {
  background: var(--border-strong);
  border-color: var(--border-strong);
}

/* Real tasks (not checklist subtasks) get the accent-color exception called
   out in #164's mockup notes -- everything else stays neutral. Accented
   both hollow and filled, so a task's circle reads as accent-colored the
   whole time it's on screen, not just once checked. */
.check-circle--accent {
  border-color: var(--accent);
}

.check-circle--accent:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.check-circle:disabled {
  cursor: default;
}

/* Same footprint as a real check-circle, invisible -- keeps an add-row's
   input aligned under sibling rows' titles without drawing a checkbox that
   doesn't do anything yet. */
.check-circle--spacer {
  visibility: hidden;
}

/* Task status circle (#308). A real task's leading control is no longer a
   plain done/not-done checkbox -- it distinguishes all three statuses so a
   list is scannable without opening each task:
     .status-ring--plan    dashed accent ring
     .status-ring--active  solid accent ring
     .status-ring--done    filled accent
   Drawn as an inline SVG <circle> (styled here) rather than a `border:
   dashed` swap on the old checkbox, because a dashed border can't reproduce
   an even dash rhythm on a curve -- the ring looked chunky and uneven that
   way, which is what settled the design on SVG. */
.status-circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  /* The ring's only painted region is its 2px stroke; the button box gives
     the whole circle a dependable tap target instead of that hairline. */
  cursor: pointer;
}

.status-circle-btn--static {
  cursor: default;
}

.status-circle {
  display: block;
  width: 18px;
  height: 18px;
}