/* The calendar editor's extras: custom recurrence, the recurring-event
   question and subscribed calendars (calendar-editor.js). */

.custom-repeat .rr-every { align-items: center; gap: 10px; margin-bottom: 12px; }
.custom-repeat .rr-every > * { flex: none; }
.custom-repeat .rr-every label { margin: 0; font-size: 14px; }
.custom-repeat input, .custom-repeat select {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); color: var(--text); font: inherit;
}
.custom-repeat input.num { width: 72px; }
.custom-repeat .field select, .custom-repeat .field input { width: auto; }
.rr-days { display: flex; gap: 6px; }
.rr-day {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; font-size: 12px; font-weight: 500;
  background: var(--hover); color: var(--text-2);
}
.rr-day.on { background: var(--accent); color: var(--accent-text); }
.rr-ends, .rr-scope { display: flex; flex-direction: column; gap: 10px; }
.field .rr-ends label, .rr-scope label {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; margin: 0;
  font-size: 14px; font-weight: 400; color: var(--text); min-height: 40px;
}
.custom-repeat .rr-ends input[type=radio], .rr-scope input[type=radio] { width: 18px; height: 18px; margin: 0 6px 0 0; padding: 0; flex: none; accent-color: var(--accent-ink); }
.field .rr-ends input[type=date] { width: 170px; }
.field .rr-ends input:disabled { opacity: .5; border-color: var(--line); background: var(--surface); }
.rr-scope { margin: 4px 0 8px; }

.sidebar h3 .grow { flex: 1; }
.cal-row { display: flex; align-items: center; }
.cal-row label { flex: 1; min-width: 0; }
.cal-row .icon-btn { visibility: hidden; }
.cal-row:hover .icon-btn, .cal-row .icon-btn:focus-visible { visibility: visible; }
.cal-list .sub.warn { color: var(--danger); }
.feed-menu { width: 200px !important; }
.feed-url { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
@media (hover: none) { .cal-row .icon-btn { visibility: visible; } }