/* === RÉGLAGES === */
/* Colonne de réglages : plafonnée et centrée sur ordi (sinon la carte 920px étire tout). */
.set-card { max-width: 620px; margin-inline-start: auto; margin-inline-end: auto; }
.set-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.set-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: var(--radius-sm); background: var(--bg-secondary); font-size: 0.85rem; font-family: var(--font-text); border: 1px solid transparent; cursor: pointer; transition: opacity 0.2s ease, border-color 0.2s ease; }
.set-chip:hover { border-color: var(--border); }
.set-chip.is-off { opacity: 0.5; text-decoration: line-through; }
.set-chip b { font-weight: 600; }
.set-chip-name { color: var(--text-secondary); font-weight: 400; }
.set-note { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }

/* En-tête de section (rythme Material, couleur accent AquaTracker). */
.set-cat { display: block; font-family: var(--font-title); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin: 1.5rem 0 0.25rem; }
.set-cat--danger { color: var(--bad); }

/* Bloc légal dépliable (pas de popup) : même disclosure que les profils. */
.set-fold { border: 1px solid var(--header-border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; margin-bottom: 0.5rem; background: var(--bg-card); }
.set-fold > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.92rem; }
.set-fold > summary::-webkit-details-marker { display: none; }
.set-fold > summary::before { content: "\25B8"; color: var(--text-secondary); transition: transform 0.2s ease; }
.set-fold[open] > summary::before { transform: rotate(90deg); }
.set-fold-body { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; }
.set-fold-body h4 { margin: 0.7rem 0 0.15rem; font-size: 0.85rem; color: var(--text-primary); }
.set-fold-body p { margin: 0 0 0.4rem; }
.set-fold-body a { color: var(--accent); }

/* Bouton destructif (zone danger). */
.pill-danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.pill-danger:hover { filter: brightness(0.94); }
.set-cat:first-of-type { margin-top: 0.5rem; }



/* Paramètres affichés : liste groupée (surface arrondie), une ligne + switch par paramètre. */
.set-list { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
/* flex-direction: row EXPLICITE : neutralise la règle globale `label { flex-direction: column }`. */
.set-row { display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; padding: 0.7rem 0.9rem; min-height: 56px; cursor: pointer; font-size: 1rem; color: var(--text-primary); }
.set-row + .set-row { border-top: 1px solid var(--header-border); }
/* Section Alertes : une seule carte (.set-alerts) contenant 2 blocs (stale + push) dans des divs
   distinctes -> le sélecteur adjacent ci-dessus ne s'applique pas ; séparateur explicite entre les 2. */
.set-alerts > #push-toggle .set-row { border-top: 1px solid var(--header-border); }
.set-row--static { cursor: default; } /* ligne non cliquable dans son ensemble (contrôle à droite) */
.set-row-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.set-row-title b { font-weight: 600; font-size: 0.98rem; }
.set-row-name { color: var(--text-secondary); font-weight: 400; font-size: 0.9rem; margin-inline-start: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row-sup { color: var(--text-secondary); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.set-row.is-off .set-row-name, .set-row.is-off .set-row-sup { opacity: 0.65; }
.set-showall { display: block; margin: 0 0 0.5rem auto; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-secondary); cursor: pointer; font-size: 0.82rem; padding: 0.35rem 1rem; transition: color 0.2s ease, border-color 0.2s ease; }
.set-showall:hover { color: var(--accent); border-color: var(--accent); }

/* Switch afficher/masquer : piste + pouce qui grandit à l'activation, couleur accent. */
.sw { position: relative; width: 48px; height: 28px; flex: 0 0 auto; display: inline-block; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw-track { position: absolute; inset: 0; border-radius: var(--radius-pill); background: transparent; border: 2px solid var(--track); transition: background 0.2s ease, border-color 0.2s ease; }
.sw-thumb { position: absolute; top: 50%; left: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--track); transform: translateY(-50%); transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease, left 0.2s ease; pointer-events: none; }
.sw input:checked ~ .sw-track { background: var(--accent); border-color: var(--accent); }
.sw input:checked ~ .sw-thumb { width: 20px; height: 20px; left: 22px; background: var(--on-accent); }
.sw input:focus-visible ~ .sw-track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Segmented control (choix parmi 2 : unité TDS, libellé KH). Actif = pilule accent. */
/* Les rangées à toggle (unités, rappel) WRAPPENT sur mobile : le segmenté passe sous le texte,
   aligné à droite, au lieu de compresser le titre ("Eau de mer", "Rappel de test" à 320px). */
#unit-toggles .set-row, #stale-toggle .set-row { flex-wrap: wrap; row-gap: 0.4rem; height: auto; min-height: 56px; }
#unit-toggles .seg, #stale-toggle .seg { margin-inline-start: auto; }
/* Mobile étroit : le segmenté du rappel (6 options : 1/3/7/14/30/Off) prend toute la largeur,
   boutons égaux. flex-basis:100% force la pleine largeur quand la rangée wrappe ; min-width:0
   laisse les boutons rétrécir pour que les 6 tiennent sans déborder même à 320px. */
@media (max-width: 420px) {
  #stale-toggle .seg { display: flex; width: 100%; flex-basis: 100%; }
  #stale-toggle .seg button { flex: 1 1 0; min-width: 0; padding: 0.35rem 0.12rem; font-size: 0.74rem; text-align: center; }
}
.seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.seg button { border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.82rem; padding: 0.3rem 0.85rem; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
.seg button + button { border-inline-start: 1px solid var(--border); }
.seg button.is-on { background: var(--accent-muted); color: var(--accent); font-weight: 600; }
.seg button:not(.is-on):hover { color: var(--text-primary); }
.set-hint { font-size: 0.78rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
/* Réglages > Mes données : deux boutons pairs, largeur ÉGALE côte à côte,
   empilés pleine largeur quand l'espace manque (320px OK). */
.set-export { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Note i18n : rubrique pas encore traduite. Masquée si vide (ex. en français). */
.i18n-note { font-size: 0.8rem; color: var(--text-secondary); background: var(--accent-muted);
  border-inline-start: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin: 0 0 0.75rem; }
.i18n-note:empty { display: none; }
.set-export .pill { flex: 1 1 12rem; text-align: center; }
.set-ranges { display: flex; flex-direction: column; gap: 0.4rem; }
.set-range-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.set-range-lab { min-width: 3rem; font-weight: 600; }
.set-range-in { width: 5rem; padding: 0.3rem 0.4rem; text-align: center; }
.set-range-sep { color: var(--text-secondary); }
.set-range-unit { color: var(--text-secondary); font-size: 0.8rem; }