/*
 * recurrence-editor.css — the shared recurrence editor (public/js/recurrence-editor.js, 2026-09-28), used by the
 * task editor (index.php) and the custom block form (blocks.php). Self-contained so it looks the same on both
 * pages; colours come from base.css.
 */
.re { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.re label { margin: 0; }
.re .re-row { display: flex; gap: 12px; flex-wrap: wrap; }
.re .re-field { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.re .re-field > label { font-size: 0.8rem; color: var(--muted); }
.re input[type="text"], .re input[type="number"], .re select {
  background: var(--bg); border: 1px solid var(--panel-border); color: var(--text);
  padding: 7px 9px; border-radius: 6px; font: inherit; font-size: 0.88rem; width: auto;
}
.re .re-field input[type="text"] { width: 100%; }
.re input[data-picker] { cursor: pointer; }
.re .re-num { width: 70px !important; }
.re .re-date { width: 150px !important; }
.re .re-soft { font-weight: 400; opacity: 0.8; }
.re .re-time-wrap { display: flex; gap: 6px; }
.re .re-time-wrap input { flex: 1; }
.re .re-clear, .re-presets button, .re .re-link {
  background: transparent; border: 1px solid var(--panel-border); color: var(--muted); border-radius: 6px;
  padding: 4px 9px; font: inherit; font-size: 0.78rem; cursor: pointer;
}
.re .re-clear:hover, .re-presets button:hover { color: var(--text); border-color: var(--accent); }
.re .re-link { border: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: inherit; }

.re .re-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.88rem; }
.re .re-line > label { font-size: 0.8rem; color: var(--muted); min-width: 64px; }
.re .re-block { display: flex; flex-direction: column; gap: 6px; padding-left: 2px; }
.re .re-block[hidden], .re [hidden] { display: none !important; }
.re .re-sub { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.re .re-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.re .re-chip {
  min-width: 42px; padding: 6px 7px; border: 1px solid var(--panel-border); border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 0.8rem; background: var(--bg); color: var(--muted);
}
.re .re-chip:hover { border-color: var(--accent); color: var(--text); }
.re .re-chip.on { background: #2C4A85; border-color: #2C4A85; color: #fff; }
.re .re-monthdays { display: grid; grid-template-columns: repeat(7, minmax(34px, 1fr)); gap: 4px; max-width: 340px; }
.re .re-daychip { min-width: 0; padding: 5px 0; text-align: center; }
.re .re-dim { opacity: 0.45; }
.re .re-presets { display: flex; gap: 6px; flex-wrap: wrap; }

.re .re-radio { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.88rem; color: var(--text); cursor: pointer; }
.re .re-radio input[type="radio"] { margin: 0; }
.re .re-ends { display: flex; flex-direction: column; gap: 6px; }
.re .re-hint { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }
.re .re-custom { font-size: 0.85rem; color: var(--text); background: var(--bg); border: 1px dashed var(--panel-border); border-radius: 6px; padding: 8px 10px; }

.re .re-adv summary { cursor: pointer; font-size: 0.8rem; color: var(--muted); }
.re .re-adv[open] summary { margin-bottom: 6px; }
.re .re-adv input { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; }

.re .re-preview { border-top: 1px solid var(--panel-border); padding-top: 8px; font-size: 0.85rem; display: flex; flex-direction: column; gap: 6px; min-height: 1.2em; }
.re .re-summary { font-weight: 500; color: var(--text); }
.re .re-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.re .re-date-pill { background: var(--bg); border: 1px solid var(--panel-border); border-radius: 999px; padding: 2px 9px; font-size: 0.78rem; }
.re .re-counts { font-size: 0.78rem; color: var(--muted); }
.re .re-err { color: var(--err); }