/* Family: the rule of a recurring item in a form (shared/php/recur_fields.php; canonical sassi/shared/recur-rule.css, hard-linked
 * into every app's public_html/assets/). Owner 2026-10-03. Tokens from the app's :root (DESIGN.md). */
/* its own tint (owner 2026-10-03): the advanced area stands apart from the form around it */
.rr{border:1px solid var(--border);border-radius:12px;padding:0;margin:.3rem 0 0;background:var(--hover)}
.rr>summary{list-style:none;cursor:pointer;padding:.55rem .8rem;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;font-size:.92rem;color:var(--txt)}
.rr>summary .rr-title{display:inline-flex;align-items:center;gap:.4rem}
.rr>summary::-webkit-details-marker{display:none}
.rr>summary .rr-sum{color:var(--dim);font-size:.85rem;flex-basis:100%;min-width:0;line-height:1.45;white-space:normal}
.rr[open]>summary{border-bottom:1px solid var(--border)}
.rr-body{padding:.5rem .8rem .6rem;display:flex;flex-direction:column;gap:.55rem}
.rr-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;font-size:.92rem}
.rr-weekday{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;flex-basis:100%}
.rr-weekday[hidden]{display:none}
.rr-row[hidden]{display:none}
.rr-row label{display:inline-flex;align-items:center;gap:.4rem}
.rr-lbl{color:var(--dim)}
.rr-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.rr-chip{position:relative;display:inline-flex}
.rr-chip input{position:absolute;opacity:0;width:0;height:0}
.rr-chip span{display:inline-block;padding:.22rem .6rem;border:1px solid var(--border);border-radius:999px;font-size:.84rem;color:var(--dim);background:var(--card);cursor:pointer;user-select:none}
.rr-chip input:checked+span{border-color:var(--ac);color:var(--acText);background:var(--acSoft)}
.rr-chip input:focus-visible+span{outline:2px solid var(--ac);outline-offset:1px}
.rr-count input{width:4.2rem}
.rr-preview{display:flex;align-items:flex-start;gap:.4rem;color:var(--dim);font-size:.85rem;line-height:1.5;padding-top:.2rem;border-top:1px dashed var(--border)}
.rr-preview .rr-preview-text{flex:1;min-width:0}
.rr-preview.bad{color:var(--bad)}