/* Paramètres — C16–C23 (reportés en A) : lignes, invariants, pipeline,
   codes de récupération, Web Push. */
.settings-page { display: grid; gap: var(--space-6); max-width: 1216px; }
.list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); }
.list-row { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: 0; }
.list-row-current { background: var(--selection); }
.list-row-muted .list-row-title { color: var(--text-muted); }
.list-row-invalid { border-left: 3px solid var(--danger); }
.list-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 44px; }
.list-row-title { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-section); font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
a.list-row-title:hover { text-decoration: underline; }
.list-row-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.list-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.list-row-meta { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.list-row-meta code { font-size: 13px; }
.list-row-editor { max-width: 800px; padding: var(--space-4) 0 var(--space-2); }

.violations { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); list-style: none; border: 1px solid var(--danger); border-radius: var(--radius-small); background: var(--danger-soft); color: var(--danger); font-size: var(--text-sm); }
.violations li { display: flex; gap: var(--space-2); align-items: start; }
.violations .ui-icon { margin-top: 2px; }

.pipeline { display: grid; gap: var(--space-2); margin: 0; overflow-x: auto; }
.pipeline-graph { min-width: 640px; max-height: 240px; }
.graph-node-box { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.graph-node-name { fill: var(--text); font-size: 14px; font-weight: 600; font-family: var(--font); }
.graph-node-kind { fill: var(--text-muted); font-size: 12px; font-family: var(--font); }
.graph-node.graph-invalid .graph-node-box { stroke: var(--danger); stroke-width: 2; }
.graph-edge { stroke-width: 1.75; }
.graph-next { stroke: var(--accent); }
.graph-reject { stroke: var(--warning); stroke-dasharray: 5 4; }
.graph-edge.graph-invalid { stroke: var(--danger); }
.graph-arrow { fill: context-stroke; }
.pipeline-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.pipeline-legend span::before { content: ""; display: inline-block; width: 20px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--accent); }
.pipeline-legend .legend-reject::before { border-top: 2px dashed var(--warning); }
.pipeline-legend .legend-invalid::before { border-color: var(--danger); }

.recovery-codes { display: grid; gap: var(--space-3); }
.recovery-codes ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.recovery-codes code { display: block; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface-2); text-align: center; letter-spacing: 1px; }
.push-device { display: grid; gap: var(--space-2); justify-items: start; }

@media (max-width: 860px) { .list-row { padding: var(--space-3) var(--space-4); } }