/* =============================================================================
   COMPONENT: the task/to-do completion checkbox (Dusk polish). A rounded-square
   control that fills plum with a white check when done, inside a full 44px tap
   target. Shared by the Today timeline (.timeline-row__check) and to-do rows
   (.plan-task__check). Done is never colour-only — it pairs with a check glyph
   and (in rows) a strikethrough title.
   ========================================================================== */
@layer components {
  .plan-task__check,
  .timeline-row__check,
  .together-item__check {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: none;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    display: inline-grid;
    place-items: center;
    background: none;
    border: 0;
    cursor: pointer;

    &::before {
      content: "";
      grid-area: 1 / 1;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      border-radius: var(--radius-sm);
      border: 2px solid var(--color-border-strong);
      background: var(--surface);
      transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    }

    /* The check: a rotated border, drawn over the box and centred. */
    &::after {
      content: "";
      grid-area: 1 / 1;
      inline-size: 0.375rem;
      block-size: 0.6875rem;
      margin-block-end: 0.1875rem;
      border: solid var(--accent-contrast);
      border-width: 0 2px 2px 0;
      rotate: 45deg;
      opacity: 0;
    }

    &:checked::before { background: var(--accent); border-color: var(--accent); }
    &:checked::after { opacity: 1; }
    &:focus-visible { outline: none; }
    &:focus-visible::before { box-shadow: var(--focus-ring); }
    &:disabled { cursor: default; }
    &:disabled:not(:checked)::before { opacity: 0.5; }
  }

  /* Today-together prototype: a round completion control at the row's far
     right (.tl-check / .cbox), distinct from the square to-do checkbox. */
  .timeline-row__check::before,
  .together-item__check::before {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: 50%;
  }

}