Author leave on the calendar itself

Planning used to mean filling in a wish list on one tab, pressing a button to
see a suggestion, then pressing another to accept it — with nothing on screen
telling you whether a plan was active. Dragging a range on the calendar now
creates the period directly, clicking a band opens it for editing, and each
change is recomputed and saved in one step. A period repeats never or yearly,
matching what the planner can actually express.

Clicking a day edits that day: its funding type, which pins it so the planner
leaves it alone, and whether the day counts as worked or off. That switch used
to be a mode covering the whole grid, which is what made the calendar confusing.

The season presets move to a rail beside the grid. Picking one lets the planner
choose the placement, then jumps there and flashes it, rather than asking the
user to guess dates the engine already knows.

A sync that funds nothing now says so, naming the period and how many days it
fell short, instead of leaving the screen unchanged and looking broken.

frontend/src/components/calendar/period-popover.css

@@ -0,0 +1,177 @@
+.period-popover__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.period-popover__content {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  max-width: 480px;
+  width: 90%;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.period-popover__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.period-popover__header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.period-popover__close {
+  background: none;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  padding: 0;
+  color: #666;
+  transition: color 0.2s;
+}
+
+.period-popover__close:hover {
+  color: #000;
+}
+
+.period-popover__body {
+  padding: 20px;
+}
+
+.period-popover__error {
+  background-color: #ffebee;
+  color: #c62828;
+  padding: 12px;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.period-popover__adhoc-notice {
+  font-size: 13px;
+  color: #666;
+  margin: 0 0 12px 0;
+}
+
+.period-popover__date-range {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+}
+
+.period-popover__field {
+  margin-bottom: 16px;
+}
+
+.period-popover__label {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 6px;
+  color: #333;
+}
+
+.period-popover__input,
+.period-popover__select {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: #fff;
+}
+
+.period-popover__input:disabled,
+.period-popover__select:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.period-popover__fieldset {
+  border: none;
+  padding: 0;
+  margin: 0 0 16px 0;
+}
+
+.period-popover__radio-label,
+.period-popover__checkbox-label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 8px;
+}
+
+.period-popover__radio-label input,
+.period-popover__checkbox-label input {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+.period-popover__footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 16px 20px;
+  border-top: 1px solid #e0e0e0;
+  background-color: #fafafa;
+}
+
+.period-popover__button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: background-color 0.2s;
+}
+
+.period-popover__button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.period-popover__button--primary {
+  background-color: #0066cc;
+  color: #fff;
+}
+
+.period-popover__button--primary:hover:not(:disabled) {
+  background-color: #0052a3;
+}
+
+.period-popover__button--secondary {
+  background-color: #e0e0e0;
+  color: #333;
+}
+
+.period-popover__button--secondary:hover:not(:disabled) {
+  background-color: #d0d0d0;
+}
+
+.period-popover__button--danger {
+  background-color: #d32f2f;
+  color: #fff;
+  margin-right: auto;
+}
+
+.period-popover__button--danger:hover:not(:disabled) {
+  background-color: #b71c1c;
+}