/* fonctions/regles/regles.css — règles et relances
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
/* ================= RÈGLES ET RELANCES =================
   Couleur de relance : ambre, cohérente avec l'échéance « aujourd'hui » (.card-due.today).
   Toutes les tailles suivent --ui-scale-factor comme le reste de l'interface. */
/* Bouton icône, même gabarit que « ? » et Paramètres ; le compteur se pose sur son coin. */
.rules-btn{position:relative;width:calc(25.5px * var(--ui-scale-factor));height:calc(25.5px * var(--ui-scale-factor));padding:0;display:flex;align-items:center;justify-content:center;font-size:calc(12px * var(--ui-scale-factor));line-height:1;border-radius:calc(5.25px * var(--ui-scale-factor));}
.rules-btn.has-reminders{border-color:color-mix(in srgb,var(--remind) 70%,var(--border));}
.rules-badge{
 position:absolute;top:calc(-5px * var(--ui-scale-factor));right:calc(-6px * var(--ui-scale-factor));
 display:inline-grid;place-items:center;min-width:calc(14px * var(--ui-scale-factor));height:calc(14px * var(--ui-scale-factor));
 padding:0 calc(3.5px * var(--ui-scale-factor));border-radius:calc(7px * var(--ui-scale-factor));box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) var(--surface);
 background:var(--remind);color:#1c1405;font-size:calc(8.5px * var(--ui-scale-factor));font-weight:800;line-height:1;pointer-events:none;
}
.rules-badge[hidden]{display:none;}

/* Pastille sur la carte : relance échue (ambre plein) ou planifiée (neutre). */
.card-labels .card-remind{
 display:inline-flex;align-items:center;gap:calc(3px * var(--ui-scale-factor));
 font-size:calc(8px * var(--ui-scale-factor));font-weight:700;line-height:1.25;letter-spacing:.01em;
 padding:calc(1.5px * var(--ui-scale-factor)) calc(5.25px * var(--ui-scale-factor));border-radius:calc(3px * var(--ui-scale-factor));
 color:var(--text-dim);background:var(--surface-3);
}
.card-labels .card-remind.is-due{color:var(--remind-text);background:var(--remind-bg);box-shadow:inset 0 0 0 calc(1px * var(--ui-scale-factor)) color-mix(in srgb,var(--remind) 45%,transparent);}

/* Fiche carte : ligne d'information sous le champ Relance. */
.modal.card-editor-modal .card-age-info{margin:calc(4px * var(--ui-scale-factor)) 0 0;font-size:calc(8.5px * var(--ui-scale-factor));line-height:1.4;color:var(--text-faint);}
.modal.card-editor-modal .card-age-info b{color:var(--text-dim);font-weight:600;}

/* Options de liste : accès contextuel aux règles. */
.list-rules-btn{width:100%;text-align:left;}
.list-rules-hint{display:block;margin-top:calc(4px * var(--ui-scale-factor));font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);}

/* ---------- Fenêtre ---------- */
.modal.rules-manager{width:min(calc(440px * var(--ui-scale-factor)),calc(100vw - calc(18px * var(--ui-scale-factor))));max-width:none;font-size:var(--card-font-size);}
.rules-manager .modal-head{padding:calc(7.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));}
.rules-manager .modal-head h2{font-size:var(--card-font-size);}
.rules-manager .modal-body{max-height:calc(82vh - calc(90px * var(--ui-scale-factor)));overflow-y:auto;gap:calc(8px * var(--ui-scale-factor));padding:calc(8px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor));}
.rules-manager .modal-foot{padding:calc(6px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));}
.rules-manager .modal-foot .rules-foot-note{margin-right:auto;font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);line-height:1.35;}
.rules-manager button:focus-visible,.rules-manager select:focus-visible,.rules-manager input:focus-visible{outline:calc(1.5px * var(--ui-scale-factor)) solid var(--accent);outline-offset:calc(1.5px * var(--ui-scale-factor));}
.rules-manager p{margin:0;}

.rules-tabs{display:flex;gap:calc(2px * var(--ui-scale-factor));padding:calc(6px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor)) 0;border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
.rules-tab{
 display:inline-flex;align-items:center;gap:calc(5px * var(--ui-scale-factor));
 padding:calc(5px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));
 background:none;border:0;border-bottom:calc(2px * var(--ui-scale-factor)) solid transparent;margin-bottom:calc(-1px * var(--ui-scale-factor));
 color:var(--text-dim);font:inherit;font-weight:600;cursor:pointer;
}
.rules-tab:hover{color:var(--text);}
.rules-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent);}
.rules-tab-count{min-width:calc(14px * var(--ui-scale-factor));padding:0 calc(4px * var(--ui-scale-factor));border-radius:calc(7px * var(--ui-scale-factor));background:var(--surface-3);color:var(--text-dim);font-size:calc(8.5px * var(--ui-scale-factor));line-height:calc(14px * var(--ui-scale-factor));text-align:center;}
.rules-tab-count.is-due{background:var(--remind);color:#1c1405;}

.rules-note{font-size:calc(8.5px * var(--ui-scale-factor));line-height:1.45;color:var(--text-faint);}
.rules-alert{padding:calc(6px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));border-radius:calc(5px * var(--ui-scale-factor));background:rgba(217,88,79,.1);border:calc(1px * var(--ui-scale-factor)) solid rgba(217,88,79,.35);color:#ffc4be;font-size:calc(9px * var(--ui-scale-factor));line-height:1.4;}
.rules-empty{display:flex;flex-direction:column;align-items:flex-start;gap:calc(6px * var(--ui-scale-factor));padding:calc(10px * var(--ui-scale-factor)) calc(2px * var(--ui-scale-factor));color:var(--text-dim);line-height:1.45;}
.rules-empty .rules-empty-title{color:var(--text);font-weight:600;}

/* ---------- Relances ---------- */
.rm-group h3{margin:0 0 calc(4px * var(--ui-scale-factor));font-size:calc(9px * var(--ui-scale-factor));font-weight:700;color:var(--text-dim);}
.rm-group h3 .rm-count{color:var(--text-faint);font-weight:600;margin-left:calc(3px * var(--ui-scale-factor));}
.rm-list,.rl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(4px * var(--ui-scale-factor));}
.rm-row{
 display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(3px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));align-items:center;
 padding:calc(6px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));border-radius:calc(5px * var(--ui-scale-factor));
 background:var(--surface-2);border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);border-left:calc(3px * var(--ui-scale-factor)) solid var(--border);
}
.rm-row.is-due{border-left-color:var(--remind);}
.rm-title{grid-column:1;justify-self:start;max-width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-weight:600;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rm-title:hover{text-decoration:underline;text-underline-offset:calc(2px * var(--ui-scale-factor));}
.rm-meta{grid-column:1;display:flex;flex-wrap:wrap;gap:calc(2px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor));font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);}
.rm-row.is-due .rm-when{color:var(--remind-text);}
.rm-actions{grid-column:2;grid-row:1 / span 2;display:flex;gap:calc(3px * var(--ui-scale-factor));}
.rm-actions .btn-ghost{padding:calc(3.5px * var(--ui-scale-factor)) calc(6.5px * var(--ui-scale-factor));font-size:calc(8.5px * var(--ui-scale-factor));white-space:nowrap;}
.rm-actions .rm-done{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));}
@media (max-width:560px){.rm-row{grid-template-columns:1fr;}.rm-actions{grid-column:1;grid-row:auto;}}

/* ---------- Liste des règles ---------- */
.rl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:calc(4px * var(--ui-scale-factor));}
.rl-toolbar .rl-templates-label{font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);margin-right:calc(2px * var(--ui-scale-factor));}
.rl-toolbar .btn-ghost,.rl-toolbar .btn-primary{padding:calc(4px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));font-size:calc(9px * var(--ui-scale-factor));}
.rl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:calc(8px * var(--ui-scale-factor));align-items:start;padding:calc(7px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));border-radius:calc(5px * var(--ui-scale-factor));background:var(--surface-2);border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
.rl-row.is-off .rl-text{opacity:.55;}
.rl-name{font-weight:600;color:var(--text);overflow-wrap:anywhere;}
.rl-summary{margin-top:calc(2px * var(--ui-scale-factor));font-size:calc(9px * var(--ui-scale-factor));line-height:1.45;color:var(--text-dim);overflow-wrap:anywhere;}
.rl-summary b{color:var(--text);font-weight:600;}
.rl-problem{margin-top:calc(3px * var(--ui-scale-factor));font-size:calc(8.5px * var(--ui-scale-factor));color:#ffb4ac;}
.rl-row-actions{display:flex;gap:calc(3px * var(--ui-scale-factor));align-items:center;}
.rl-row-actions .btn-ghost{padding:calc(3.5px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor));font-size:calc(8.5px * var(--ui-scale-factor));}
.rl-delete{display:grid;place-items:center;width:calc(20px * var(--ui-scale-factor));height:calc(20px * var(--ui-scale-factor));padding:0;border:0;border-radius:calc(4px * var(--ui-scale-factor));background:none;color:var(--text-dim);cursor:pointer;}
.rl-delete:hover,.rl-delete:focus-visible{color:var(--danger);background:rgba(217,88,79,.1);}
.rl-switch{position:relative;display:inline-block;width:calc(26px * var(--ui-scale-factor));height:calc(15px * var(--ui-scale-factor));margin-top:calc(1px * var(--ui-scale-factor));cursor:pointer;}
.rl-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.rl-switch-track{position:absolute;inset:0;border-radius:calc(8px * var(--ui-scale-factor));background:var(--surface-3);border:calc(1px * var(--ui-scale-factor)) solid var(--border);transition:background-color .15s ease,border-color .15s ease;}
.rl-switch-track::after{content:"";position:absolute;top:calc(2px * var(--ui-scale-factor));left:calc(2px * var(--ui-scale-factor));width:calc(9px * var(--ui-scale-factor));height:calc(9px * var(--ui-scale-factor));border-radius:50%;background:var(--text-dim);transition:transform .15s ease,background-color .15s ease;}
.rl-switch input:checked + .rl-switch-track{background:color-mix(in srgb,var(--accent) 35%,var(--surface-3));border-color:var(--accent);}
.rl-switch input:checked + .rl-switch-track::after{transform:translateX(calc(11px * var(--ui-scale-factor)));background:var(--accent);}
.rl-switch input:focus-visible + .rl-switch-track{outline:calc(1.5px * var(--ui-scale-factor)) solid var(--accent);outline-offset:calc(1.5px * var(--ui-scale-factor));}
@media (prefers-reduced-motion:reduce){.rl-switch-track,.rl-switch-track::after{transition:none;}}

/* ---------- Éditeur : Quand → Si → Alors, reliés par un rail (c'est une séquence). ---------- */
.rule-editor{display:flex;flex-direction:column;gap:calc(8px * var(--ui-scale-factor));}
.rule-editor .field{margin:0;}
.rule-editor .field-label{margin-bottom:calc(3px * var(--ui-scale-factor));font-size:calc(8px * var(--ui-scale-factor));}
.rule-steps{position:relative;display:flex;flex-direction:column;gap:calc(6px * var(--ui-scale-factor));padding-left:calc(14px * var(--ui-scale-factor));}
.rule-steps::before{content:"";position:absolute;left:calc(4px * var(--ui-scale-factor));top:calc(10px * var(--ui-scale-factor));bottom:calc(10px * var(--ui-scale-factor));width:calc(1.5px * var(--ui-scale-factor));background:var(--border);}
.rule-block{position:relative;margin:0;padding:calc(7px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);border-radius:calc(6px * var(--ui-scale-factor));background:var(--surface-2);display:flex;flex-direction:column;gap:calc(6px * var(--ui-scale-factor));min-width:0;}
.rule-block::before{content:"";position:absolute;left:calc(-13px * var(--ui-scale-factor));top:calc(9px * var(--ui-scale-factor));width:calc(8px * var(--ui-scale-factor));height:calc(8px * var(--ui-scale-factor));border-radius:50%;background:var(--surface);border:calc(1.5px * var(--ui-scale-factor)) solid var(--accent);}
.rule-block legend{float:left;width:100%;padding:0;margin:0;font-size:calc(10px * var(--ui-scale-factor));font-weight:700;color:var(--text);}
.rule-block legend .rule-optional{font-weight:500;color:var(--text-faint);margin-left:calc(4px * var(--ui-scale-factor));}
/* Choix « et / ou » entre les conditions : un select discret, à l'intérieur du texte « facultatif »
   (n'apparaît qu'à partir de 2 conditions, sinon le choix n'a pas de sens). */
.rule-optional select{font:inherit;color:inherit;background:transparent;border:none;border-bottom:calc(1px * var(--ui-scale-factor)) dotted var(--text-faint);padding:0;cursor:pointer;}
.rule-optional select:focus{outline:none;border-bottom-color:var(--accent);}
.rule-optional select option{background:var(--surface-2);color:var(--text);}
.rule-block legend + *{clear:both;}
.rule-editor select,.rule-editor input[type=text],.rule-editor input[type=number]{
 background:var(--surface-3);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5px * var(--ui-scale-factor));
 color:var(--text);font:inherit;font-size:calc(10px * var(--ui-scale-factor));padding:calc(5px * var(--ui-scale-factor)) calc(6.5px * var(--ui-scale-factor));color-scheme:dark;min-width:0;
}
.rule-editor select{max-width:100%;}
.rule-editor .rule-wide{width:100%;}
.rule-editor input[type=number]{width:calc(52px * var(--ui-scale-factor));text-align:center;}
.rule-editor select:focus,.rule-editor input:focus{outline:none;border-color:var(--accent);}
.rule-hint{font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);line-height:1.4;}
.rule-editor .label-dropdown-toggle{font-size:calc(9.5px * var(--ui-scale-factor));padding:calc(5px * var(--ui-scale-factor)) calc(6.5px * var(--ui-scale-factor));}
.rule-editor .swatch-row{margin-top:calc(2px * var(--ui-scale-factor));}
.rule-preview{padding:calc(6px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));border-radius:calc(5px * var(--ui-scale-factor));background:color-mix(in srgb,var(--accent) 9%,transparent);border:calc(1px * var(--ui-scale-factor)) solid color-mix(in srgb,var(--accent) 30%,transparent);font-size:calc(9px * var(--ui-scale-factor));line-height:1.45;color:var(--text);}
.rule-problems{margin:0;padding:calc(6px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) calc(22px * var(--ui-scale-factor));border-radius:calc(5px * var(--ui-scale-factor));background:rgba(217,88,79,.1);border:calc(1px * var(--ui-scale-factor)) solid rgba(217,88,79,.35);color:#ffc4be;font-size:calc(9px * var(--ui-scale-factor));line-height:1.45;}

/* Lignes de conditions (« La carte … ») et d'actions (numérotées : elles s'exécutent dans l'ordre). */
.rule-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(4px * var(--ui-scale-factor));}
.rule-item{display:flex;flex-wrap:wrap;align-items:center;gap:calc(5px * var(--ui-scale-factor));padding:calc(5px * var(--ui-scale-factor)) calc(4px * var(--ui-scale-factor)) calc(5px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));border-radius:calc(5px * var(--ui-scale-factor));background:var(--surface-3);}
.rule-item-lead{font-size:calc(9px * var(--ui-scale-factor));color:var(--text-faint);white-space:nowrap;}
.rule-item-num{display:inline-grid;place-items:center;width:calc(14px * var(--ui-scale-factor));height:calc(14px * var(--ui-scale-factor));border-radius:50%;background:var(--surface-2);color:var(--text-dim);font-size:calc(8px * var(--ui-scale-factor));font-weight:700;flex-shrink:0;}
.rule-item-value{display:flex;flex-wrap:wrap;align-items:center;gap:calc(5px * var(--ui-scale-factor));flex:1 1 calc(120px * var(--ui-scale-factor));min-width:0;}
.rule-item-value .label-dropdown{flex:1 1 auto;min-width:calc(110px * var(--ui-scale-factor));}
/* Étiquettes des conditions et actions : affichées à plat (labelDropdownHtml, option inline), un clic
   coche ou décoche, sans menu à dérouler ni boîte à faire défiler. Prend toute la largeur de la ligne. */
.rule-item-value .label-dropdown.is-inline{flex:1 1 100%;}
/* La ligne passe alors sous le sélecteur (et sous la croix de retrait), sur toute la largeur. */
.rule-item-value:has(> .label-dropdown.is-inline){flex-basis:100%;order:1;}
.rule-editor .label-dropdown.is-inline .label-dropdown-menu{display:flex;flex-wrap:wrap;gap:calc(4px * var(--ui-scale-factor));position:static;max-height:none;overflow:visible;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}
.rule-editor .label-dropdown.is-inline .label-check{padding:calc(2.5px * var(--ui-scale-factor)) calc(6.5px * var(--ui-scale-factor)) calc(2.5px * var(--ui-scale-factor)) calc(4px * var(--ui-scale-factor));background:var(--surface-2);}
.rule-editor .label-dropdown.is-inline .label-check:hover{border-color:var(--text-faint);color:var(--text);}
.rule-editor .label-dropdown.is-inline .label-check.checked{background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));border-color:var(--accent);box-shadow:none;}
.rule-editor .label-dropdown.is-inline .label-dropdown-add{padding:calc(2.5px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));}
.rule-editor .label-dropdown.is-inline .label-dropdown-selected{margin-top:calc(5px * var(--ui-scale-factor));align-items:center;}
/* Les puces ordonnables répètent les étiquettes cochées : on dit à quoi elles servent. */
.rule-editor .label-dropdown.is-inline .label-dropdown-selected::before{content:"Ordre sur la carte (glisser) :";font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);}
.rule-item-value select{flex:1 1 auto;min-width:0;}
.rule-item-value input[type=text]{flex:1 1 calc(100px * var(--ui-scale-factor));}
.rule-editor .rule-item select,.rule-editor .rule-item input{background:var(--surface-2);}
.rule-item-remove{margin-left:auto;display:grid;place-items:center;width:calc(18px * var(--ui-scale-factor));height:calc(18px * var(--ui-scale-factor));padding:0;border:0;border-radius:calc(4px * var(--ui-scale-factor));background:none;color:var(--text-faint);font-size:calc(12px * var(--ui-scale-factor));line-height:1;cursor:pointer;flex-shrink:0;}
.rule-item-remove:hover,.rule-item-remove:focus-visible{color:var(--danger);background:rgba(217,88,79,.12);}
.rule-add{align-self:flex-start;padding:calc(3px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) dashed var(--border);border-radius:calc(5px * var(--ui-scale-factor));background:none;color:var(--text-dim);font:inherit;font-size:calc(9px * var(--ui-scale-factor));font-weight:600;cursor:pointer;}
.rule-add:hover,.rule-add:focus-visible{color:var(--text);border-color:var(--accent);}
.rule-inline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:calc(5px * var(--ui-scale-factor));font-size:calc(9.5px * var(--ui-scale-factor));color:var(--text-dim);}
.rule-color-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:calc(5px * var(--ui-scale-factor));padding:calc(3.5px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor));font-size:calc(9px * var(--ui-scale-factor));}
.rule-color-dot{width:calc(10px * var(--ui-scale-factor));height:calc(10px * var(--ui-scale-factor));border-radius:calc(3px * var(--ui-scale-factor));box-shadow:inset 0 0 0 calc(1px * var(--ui-scale-factor)) rgba(255,255,255,.25);}
.rule-color-btn.is-picking{border-color:var(--accent);box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) var(--accent);}
.rule-item-value textarea{flex:1 1 100%;min-height:calc(34px * var(--ui-scale-factor));resize:vertical;background:var(--surface-2);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5px * var(--ui-scale-factor));color:var(--text);font:inherit;font-size:calc(10px * var(--ui-scale-factor));padding:calc(5px * var(--ui-scale-factor)) calc(6.5px * var(--ui-scale-factor));color-scheme:dark;}
.rule-item-value textarea:focus{outline:none;border-color:var(--accent);}
/* Nouvelle liste : onglets « Une liste / Plusieurs listes » et lignes de création groupée. */
.modal.add-list-modal{width:min(calc(360px * var(--ui-scale-factor)),calc(100vw - calc(18px * var(--ui-scale-factor))));}
.add-list-tabs{padding:calc(2px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor)) 0;}
.add-list-tabs .rules-tab{font-size:calc(9.5px * var(--ui-scale-factor));padding:calc(4px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor)) calc(5px * var(--ui-scale-factor));}
.add-list-modal .al-rows{display:flex;flex-direction:column;gap:calc(4px * var(--ui-scale-factor));max-height:min(calc(300px * var(--ui-scale-factor)),55vh);overflow-y:auto;overscroll-behavior:contain;padding:calc(1px * var(--ui-scale-factor));margin:calc(-1px * var(--ui-scale-factor));}
.add-list-modal .al-row{display:flex;align-items:center;gap:calc(5px * var(--ui-scale-factor));min-width:0;}
.add-list-modal .al-row-num{flex-shrink:0;width:calc(12px * var(--ui-scale-factor));text-align:right;font-size:calc(8.5px * var(--ui-scale-factor));font-weight:600;color:var(--text-faint);font-variant-numeric:tabular-nums;}
.add-list-modal .al-color-btn{align-self:stretch;flex-shrink:0;gap:calc(4px * var(--ui-scale-factor));padding:0 calc(6px * var(--ui-scale-factor));}
.add-list-modal .al-color-btn .rule-color-dot{flex-shrink:0;width:calc(22px * var(--ui-scale-factor));height:calc(12px * var(--ui-scale-factor));border-radius:calc(3.5px * var(--ui-scale-factor));}
.add-list-modal .al-color-caret{font-size:calc(8px * var(--ui-scale-factor));color:var(--text-faint);line-height:1;}
.add-list-modal .al-color-btn.is-none .rule-color-dot{box-shadow:none;border:calc(1px * var(--ui-scale-factor)) dashed var(--text-faint);box-sizing:border-box;}
.add-list-modal .al-row-input{flex:1;min-width:0;background:var(--surface-2);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5px * var(--ui-scale-factor));color:var(--text);font:inherit;font-size:calc(10px * var(--ui-scale-factor));padding:calc(5px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor));}
.add-list-modal .al-row-input:focus{outline:none;border-color:var(--accent);}
.add-list-modal .rule-item-remove:disabled{opacity:.3;cursor:default;background:none;color:var(--text-faint);}
.add-list-modal .al-tools{display:flex;align-items:center;gap:calc(8px * var(--ui-scale-factor));flex-wrap:wrap;margin-top:calc(2px * var(--ui-scale-factor));}
.add-list-modal .rule-add:disabled{opacity:.4;cursor:default;}
.add-list-modal .al-hint{font-size:calc(8px * var(--ui-scale-factor));color:var(--text-faint);line-height:1.35;}
.add-list-modal .modal-foot{align-items:center;}
.add-list-modal .al-foot-note{margin-right:auto;font-size:calc(8.5px * var(--ui-scale-factor));color:var(--text-faint);}
.add-list-modal .al-foot-note.is-error{color:#ffb4ac;font-weight:600;}
.add-list-modal .modal-foot button:disabled{opacity:.45;cursor:default;}
/* Fenêtre « Teinte » : juste la grille, sans défilement (16 colonnes × 8 nuances). */
.modal.rule-palette-window{width:auto;max-width:calc(100vw - calc(18px * var(--ui-scale-factor)));}
.rule-palette-window .modal-head{padding:calc(6px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor)) calc(5px * var(--ui-scale-factor));}
.rule-palette-window .modal-head h2{font-size:calc(10px * var(--ui-scale-factor));}
.rule-palette-grid{display:grid;grid-template-columns:repeat(16,calc(15px * var(--ui-scale-factor)));gap:calc(3px * var(--ui-scale-factor));padding:calc(8px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor));}
.rule-palette-grid .swatch{width:calc(15px * var(--ui-scale-factor));height:calc(15px * var(--ui-scale-factor));border-radius:calc(3.75px * var(--ui-scale-factor));padding:0;margin:0;}
.rl-confirm{flex-wrap:wrap;justify-content:flex-end;}
.rl-confirm-text{font-size:calc(9px * var(--ui-scale-factor));font-weight:600;color:#ffb4ac;margin-right:calc(2px * var(--ui-scale-factor));}
.rl-row-actions .rl-confirm-yes{border-color:rgba(217,88,79,.55);color:#ffc4be;}
.rl-row-actions .rl-confirm-yes:hover,.rl-row-actions .rl-confirm-yes:focus-visible{background:rgba(217,88,79,.16);}
/* Compacter : bouton à bascule. Enfoncé = fond plus sombre, ombre intérieure, bord d'accent. */
.arrange-btn.is-pressed{background:var(--bg);border-color:color-mix(in srgb,var(--accent) 65%,var(--border));box-shadow:inset 0 calc(1.5px * var(--ui-scale-factor)) calc(3px * var(--ui-scale-factor)) rgba(0,0,0,.45);transform:translateY(calc(.5px * var(--ui-scale-factor)));}
.arrange-btn.is-pressed:hover{border-color:var(--accent);}
#btnSettings:not(.settings-open){color:var(--text);}
/* Boutons de fenêtre (Liste, Étiquettes, Règles) : même rendu que Paramètres ouvert tant que leur
   fenêtre est affichée (état tenu par syncWindowButtons, quel que soit le moyen de fermeture). */
#btnAddList.window-open,#btnLabels.window-open,#btnRules.window-open{
 background:color-mix(in srgb,var(--surface-2) 72%,#000 28%);
 border-color:color-mix(in srgb,var(--border) 78%,#000 22%);
 color:color-mix(in srgb,var(--text-dim) 88%,#000 12%);
 box-shadow:inset 0 calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor)) rgba(0,0,0,.28);
}
#btnAddList.window-open:hover,#btnLabels.window-open:hover,#btnRules.window-open:hover{background:color-mix(in srgb,var(--surface-3) 74%,#000 26%);color:var(--text-dim);}
/* ---------- Message après application automatique ---------- */
.rules-toast{
 /* bottom : au-dessus de la ligne des raccourcis clavier (.shortcuts-hint), qu'il ne doit pas masquer. */
 position:fixed;left:50%;bottom:calc(40px * var(--ui-scale-factor));transform:translateX(-50%);z-index:3200;
 display:flex;align-items:center;gap:calc(8px * var(--ui-scale-factor));max-width:min(calc(520px * var(--ui-scale-factor)),calc(100vw - 24px));
 padding:calc(7px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor)) calc(11px * var(--ui-scale-factor));
 border-radius:calc(7px * var(--ui-scale-factor));background:var(--surface);border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-left:calc(3px * var(--ui-scale-factor)) solid var(--remind);
 box-shadow:0 calc(10px * var(--ui-scale-factor)) calc(30px * var(--ui-scale-factor)) rgba(0,0,0,.45);font-size:calc(10px * var(--ui-scale-factor));color:var(--text);
 opacity:1;
 transition:opacity .28s ease,transform .28s ease;
}
.rules-toast[hidden]{display:none;}
.rules-toast.is-entering,.rules-toast.is-leaving{opacity:0;transform:translateX(-50%) translateY(calc(6px * var(--ui-scale-factor)));}
.rules-toast.is-leaving{pointer-events:none;}
@media (prefers-reduced-motion:reduce){
 .rules-toast{transition:opacity .2s linear;}
 .rules-toast.is-entering,.rules-toast.is-leaving{transform:translateX(-50%);}
}
.rules-toast .rules-toast-text{line-height:1.4;}
.rules-toast .btn-ghost{padding:calc(3.5px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));font-size:calc(9px * var(--ui-scale-factor));white-space:nowrap;}
.rules-toast .modal-close{flex-shrink:0;}