/* ===== How a repeating task is being kept =====
 * These used to be the habits page. A habit is a task now (#344), so the streak
 * is read on the task's own page and the styles came with it. The free colour
 * picker each habit carried is gone with the model: a task is coloured by what
 * it is, not by a value someone typed into a picker (#341). */

.task-streak {
  margin: var(--toddyi-size-1-5rem) 0;
  padding-top: var(--toddyi-size-1rem);
  border-top: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
}

.task-streak__rule {
  display: flex;
  align-items: center;
  gap: var(--toddyi-size-0-5rem);
  font-size: var(--toddyi-size-1rem);
  margin-bottom: var(--toddyi-size-0-75rem);
}

.task-streak__stats {
  display: flex;
  gap: var(--toddyi-size-1rem);
  flex-wrap: wrap;
  margin: var(--toddyi-size-1rem) 0;
}

.task-streak__stat {
  flex: 1 1 var(--toddyi-size-8rem);
  text-align: center;
  padding: var(--toddyi-size-1rem);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  border-radius: var(--toddyi-size-0-5rem);
  background: var(--pico-card-background-color);
}

.task-streak__num {
  display: block;
  font-size: var(--toddyi-size-1-8rem);
  font-weight: 800;
  color: var(--task-color, var(--pico-primary));
}

.task-streak__label {
  display: block;
  font-size: var(--toddyi-size-0-8rem);
  color: var(--pico-muted-color);
}

/* The fortnight strip: one button per day, tapped to mark or clear it. */
.kept-days {
  display: flex;
  gap: var(--toddyi-size-0-4rem);
  margin-top: var(--toddyi-size-0-75rem);
  flex-wrap: wrap;
}

/* button_to wraps each day in a form, so the form is the flex item and the
   button only fills it. Sizing the button alone left it at its content width —
   Pico makes a button fill its container, and a container sized by its content
   makes that circular — and the weekday label spilled out of the edge. */
.kept-day__form {
  margin: 0;
  flex: 0 0 auto;
  display: flex;
  width: var(--toddyi-size-3rem);
}

.kept-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  padding: var(--toddyi-size-0-4rem) 0;
  margin: 0;
  border-radius: var(--toddyi-size-0-5rem);
  background: var(--pico-secondary-background);
  color: var(--pico-color);
  border: var(--toddyi-size-1px) solid var(--pico-muted-border-color);
  cursor: pointer;
  line-height: 1.2;
}

.kept-day.is-kept {
  background: var(--task-color, var(--pico-primary));
  color: var(--toddyi-text-on-dark);
  border-color: transparent;
}

.kept-day.is-today { outline: var(--toddyi-size-2px) solid var(--pico-primary); }
.kept-day__dow { font-size: var(--toddyi-size-0-65rem); opacity: 0.8; }
.kept-day__num { font-size: var(--toddyi-size-0-95rem); font-weight: 700; }