/* Fenêtre « Mettre mon site en ligne » (#publishModal).
   Une seule colonne lisible de haut en bas : l’adresse, les deux étapes sur une
   ligne fine, puis les vérifications en liste simple. Pas de cadres empilés :
   les blocs sont séparés par l’espace et un filet, les options avancées sont
   des lignes repliables. Tokens uniquement : le thème sombre suit tout seul. */

#publishModal .modal { width: min(600px, 100%); background: var(--surface); }

/* En-tête : titre, une phrase, fermer. */
#publishModal .modal-header { gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); border-bottom: 0; }
#publishModal .modal-header h2 { margin: 0; font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
#publishModal .modal-header p { max-width: 46ch; margin: 6px 0 0; color: var(--muted); font-size: var(--text-md); line-height: 1.5; }

/* Étapes : deux segments sur une ligne fine, le libellé dessous. */
#publishModal .publish-steps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0 var(--space-6); padding: 0; counter-reset: none; }
#publishModal .publish-steps li { display: grid; gap: 8px; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
#publishModal .publish-steps li::before { content: ""; display: block; height: 3px; border-radius: var(--radius-pill); background: var(--line); }
#publishModal .publish-steps li > span { display: none; }
#publishModal .publish-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; background: none; }
#publishModal .publish-steps li[aria-current="step"]::before { background: var(--blue); }
#publishModal .publish-steps li.done { color: var(--ink-2); }
#publishModal .publish-steps li.done::before { background: var(--green); }
#publishModal .publish-steps li.error { color: var(--red); }
#publishModal .publish-steps li.error::before { background: var(--red); }

/* Adresse : une ligne d’information, pas un encadré teinté. */
#publishModal .publish-address { gap: 2px; margin: var(--space-5) var(--space-6) 0; padding: 0 0 var(--space-5); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
#publishModal .publish-address small { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
#publishModal .publish-address strong { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
#publishModal .publish-address span { max-width: 60ch; margin-top: 2px; }

/* Messages d’état (envoyé, erreur) alignés sur la colonne. */
#publishModal :is(.publish-sent, .publish-error) { margin: var(--space-5) var(--space-6) 0; }

/* Vérifications : un titre de bloc avec son état, puis une liste. */
#publishModal .release-summary { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); margin: var(--space-5) var(--space-6) var(--space-2); padding: 0; border: 0; border-radius: 0; background: none; }
#publishModal .release-summary .release-icon { display: none; }
#publishModal .release-summary strong { font-size: var(--text-lg); font-weight: 600; }
#publishModal .release-summary > div span { font-size: var(--text-sm); }
#publishModal .release-summary > .state { align-self: start; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 500; }

#publishModal .preflight-list { grid-template-columns: minmax(0, 1fr); margin: 0 var(--space-6); border: 0; border-top: 1px solid var(--line); border-radius: 0; }
#publishModal .preflight-list > div { grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); min-height: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; }
#publishModal .preflight-list > div > svg { width: 18px; height: 18px; }
#publishModal .preflight-list > div[hidden] { display: none; }
#publishModal .preflight-list span { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-4); }
#publishModal .preflight-list strong { font-weight: 500; }
#publishModal .preflight-list small { margin: 0; color: var(--muted); font-size: var(--text-sm); }
#publishModal .preflight-list > div[data-preflight-status="failed"] small { color: var(--red); }
#publishModal .preflight-list > div.has-data-action { align-items: start; }
#publishModal .preflight-list > div.has-data-action > span { display: grid; justify-content: stretch; }

/* Options avancées : des lignes repliables, sans carte. */
#publishModal .publish-domain-choice { gap: 4px; margin: 0 var(--space-6); padding: 0; border: 0; border-radius: 0; background: none; }
#publishModal :is(.publish-domain-advanced, .release-note-advanced) { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
#publishModal .release-note-advanced { margin: 0 var(--space-6) var(--space-5); }
#publishModal :is(.publish-domain-advanced, .release-note-advanced) > summary { min-height: 44px; padding: 0; color: var(--ink-2); font-size: var(--text-md); font-weight: 500; }
#publishModal :is(.publish-domain-advanced, .release-note-advanced) > summary:hover { color: var(--ink); }
#publishModal :is(.publish-domain-advanced, .release-note-advanced) .ui-advanced-body { padding: 0 0 var(--space-4); }
#publishModal .publish-domain-status { margin: 4px 0 0; font-size: var(--text-sm); }
#publishModal .publish-domain-status:empty { display: none; }
#publishModal .publish-domain-option { border-color: var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
#publishModal .publish-domain-option:has(input:checked) { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
#publishModal .publish-domain-input :is(input, select) { border-color: var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); }
#publishModal .publish-domain-help { border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-2); }
#publishModal .publish-domain-status.error { color: var(--red); }

/* Avancement et réussite : mêmes marges, sans fond teinté. */
#publishModal .publish-progress { margin: var(--space-5) var(--space-6); padding: 0; border: 0; border-radius: 0; background: none; }
#publishModal .publish-progress-head { font-size: var(--text-sm); }
#publishModal .publish-success { gap: var(--space-3) var(--space-4); margin: var(--space-5) var(--space-6); padding: 0; border: 0; border-radius: 0; background: none; }
#publishModal .publish-success-icon { width: 36px; height: 36px; color: var(--surface); }
#publishModal .publish-success strong { font-size: var(--text-lg); }
#publishModal .publish-success > div:nth-child(2) span { font-size: var(--text-sm); }
#publishModal .publish-success code { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-2); font-family: var(--font-mono); }

/* Pied : actions à droite, fond identique à la fenêtre. */
#publishModal .modal-actions { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface); }

@media (max-width: 560px) {
  #publishModal .modal-header { padding: var(--space-5) var(--space-4) var(--space-3); }
  #publishModal .modal-header h2 { font-size: var(--text-xl); }
  #publishModal :is(.publish-steps, .publish-address, .publish-sent, .publish-error, .release-summary, .preflight-list, .publish-domain-choice, .release-note-advanced, .publish-progress, .publish-success) { margin-inline: var(--space-4); }
  #publishModal .modal-actions { padding: var(--space-3) var(--space-4); }
  #publishModal .modal-actions .button { flex: 1; justify-content: center; }
}

/* Une information à la fois : l’icône dit déjà « vérifié » ou « pas encore » ;
   le texte de ligne ne reste que pour un échec, un avertissement ou une limite. */
#publishModal .preflight-list > div:is(:not([data-preflight-status]), [data-preflight-status="passed"], [data-preflight-status="not_executed"]) small { display: none; }
/* L’adresse réservée est déjà affichée en haut : seule une erreur reste ici. */
#publishModal .publish-domain-status:not(.error) { display: none; }
/* Vérification terminée, rien d’envoyé : l’état est dans l’en-tête du bloc, pas de barre à 100 %. */
#publishModal:has([data-publish-step="publish"][aria-current="step"]):has(#confirmPublish:not(:disabled)) #publishProgress { display: none; }