/** * MageTicket * Fichier : public/assets/css/distribution.css * Rôle : Installation finale et centre de distribution responsive. * Auteur : Régis KREMER * Version : 0.33.78 * Version projet : 0.33.0 * Révision : 0.33.78 * Lot : MAGETICKET FIRST INSTALL COMPLETE JOURNEY UX ACCESSIBILITY RECETTE FINAL1 * Base requise : 0.33.77 * Créé le : 2026-07-22 * Modifié le : 2026-07-29 * Dépendances : shell.css, governance.css, tokens et composants MageTicket * Contraintes : design dense uniforme, thèmes clair/sombre, bord à bord, zones sûres, lower-grid en bas * Modifications : harmonisation finale du parcours, statuts attendus, aides, validation, mots de passe et états de soumission. */ .distribution-shell{width:100%;min-width:0;min-height:100%;height:auto;display:flex;flex-direction:column;background:var(--bg);color:var(--text)} .distribution-workspace{min-height:0;flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--bg);color:var(--text)}.distribution-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}.distribution-brand img{width:40px;height:40px;object-fit:contain}.distribution-brand span{display:grid}.distribution-brand small,.distribution-install p{color:var(--muted)}.distribution-install h1,.distribution-install h2{margin:.15rem 0}.distribution-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}.distribution-metrics article{padding:var(--space-3);border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm)}.distribution-metrics span{display:block;color:var(--muted);font-size:var(--fs-sm)}.distribution-metrics strong{font-size:var(--fs-lg)}.distribution-grid,.distribution-lower-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4)}.distribution-lower-grid{margin-top:auto}.distribution-status{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--line-strong);border-radius:var(--r-xs);color:var(--muted)}.distribution-status--ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,var(--line))}.distribution-status--error{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,var(--line))}.distribution-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}.distribution-checks li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-xs)}.distribution-checks li>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid currentColor}.distribution-checks li div{display:grid}.distribution-checks small{color:var(--muted)}.distribution-checks em{font-size:var(--fs-xs);color:var(--red)}.distribution-checks .is-ok>span{color:var(--green)}.distribution-checks .is-warning>span{color:var(--orange)}.distribution-checks .is-error>span{color:var(--red)}.distribution-checks.compact{max-height:380px;overflow:auto}.distribution-workspace form{display:grid;gap:12px}.distribution-workspace label{display:grid;gap:6px}.distribution-workspace input,.distribution-workspace textarea{width:100%;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:var(--r-xs);padding:10px}.distribution-workspace label span{color:var(--muted);font-size:var(--fs-sm)}.distribution-alert,.distribution-live{padding:10px 12px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-xs)}.distribution-alert{border-color:var(--red)}.distribution-definitions{display:grid;gap:10px}.distribution-definitions div{padding:10px;border-bottom:1px solid var(--line)}.distribution-definitions dt{font-weight:700}.distribution-definitions dd{margin:4px 0 0;color:var(--muted)}.distribution-install{min-height:100dvh;display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);background:var(--bg);color:var(--text)}.distribution-install-brand{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,5vw,72px);background:var(--bg-deep);border-right:1px solid var(--line)}.distribution-install-brand img{width:min(320px,100%);height:auto;max-height:96px;object-fit:contain;object-position:left center}.distribution-install-panel{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(20px,4vw,56px);overflow:auto}.distribution-install-panel footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.distribution-workspace table,.distribution-install table{width:100%;border-collapse:collapse}.distribution-workspace th,.distribution-workspace td,.distribution-install th,.distribution-install td{text-align:left;padding:9px;border-bottom:1px solid var(--line)} @media(max-width:900px){.distribution-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.distribution-grid,.distribution-lower-grid{grid-template-columns:1fr}.distribution-install{grid-template-columns:1fr}.distribution-install-brand{border-right:0;border-bottom:1px solid var(--line);padding:calc(20px + var(--safe-top)) calc(18px + var(--safe-right)) 20px calc(18px + var(--safe-left))}.distribution-install-panel,.distribution-workspace{padding:16px calc(14px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(14px + var(--safe-left))}}@media(max-width:540px){.distribution-metrics{grid-template-columns:1fr 1fr}.distribution-checks li{grid-template-columns:24px minmax(0,1fr)}.distribution-checks em{grid-column:2}.distribution-install-panel footer{align-items:stretch;flex-direction:column}.distribution-install-panel footer .button{width:100%}} @media(prefers-reduced-motion:reduce){.distribution-workspace *{scroll-behavior:auto!important;transition:none!important}} @supports(padding:max(0px)){@media(max-width:900px){.distribution-workspace,.distribution-install-panel{padding-left:max(calc(14px + var(--safe-left)),env(safe-area-inset-left));padding-right:max(calc(14px + var(--safe-right)),env(safe-area-inset-right));padding-bottom:max(calc(16px + var(--safe-bottom)),env(safe-area-inset-bottom))}}} /* Installation guidée 0.33.71 */ .first-run-install .distribution-install-panel{justify-content:flex-start;gap:20px}.first-run-steps{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none}.first-run-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:10px;color:var(--muted)}.first-run-steps li span{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;font-weight:700}.first-run-steps li.is-current{color:var(--text)}.first-run-steps li.is-current span{border-color:var(--accent);background:var(--brand-soft);color:var(--accent)}.first-run-heading{display:grid;gap:8px}.first-run-heading h2,.first-run-heading p{margin:0}.first-run-environment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.first-run-environment article{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs)}.first-run-environment article>.ti{display:grid;place-items:center;width:40px;height:40px;background:var(--brand-soft);color:var(--accent);border-radius:var(--r-xs);font-size:var(--icon-md)}.first-run-environment article div{display:grid;gap:3px;min-width:0}.first-run-environment span,.first-run-environment small{color:var(--muted);font-size:var(--fs-sm)}.first-run-environment strong{font-size:var(--fs-md)}.first-run-breakable{overflow-wrap:anywhere}.first-run-checks{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs);overflow:hidden}.first-run-checks summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;font-weight:700}.first-run-checks summary span{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;background:var(--surface-2);border-radius:999px}.first-run-checks .distribution-checks{margin:0;border-top:1px solid var(--line)}.first-run-config{display:grid;gap:18px;padding:18px;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-xs)}.first-run-section-heading{display:grid;gap:5px}.first-run-section-heading>span{color:var(--accent);font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.first-run-section-heading h3,.first-run-section-heading p{margin:0}.first-run-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.first-run-fields label{display:grid;gap:7px;min-width:0}.first-run-fields label.is-wide{grid-column:1/-1}.first-run-fields label>span{font-weight:700}.first-run-fields input,.first-run-fields select{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);border-radius:var(--r-xs);padding:11px 12px;font:inherit}.first-run-fields input:focus,.first-run-fields select:focus{outline:3px solid var(--focus);outline-offset:2px}.first-run-fields small,.first-run-checkbox small{color:var(--muted)}.first-run-checkbox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:var(--r-xs)}.first-run-checkbox input{margin-top:3px}.first-run-checkbox span{display:grid;gap:4px}.first-run-config footer,.first-run-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.first-run-config-ready,.distribution-install-notice{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface)}.first-run-config-ready>.ti,.distribution-install-notice>.ti{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--success-soft);color:var(--green)}.first-run-config-ready p{margin:4px 0 0;color:var(--muted)}.distribution-install-notice.is-success{border-color:var(--green)}.distribution-install-notice.is-error{border-color:var(--red)}.distribution-install-notice.is-error>.ti{background:var(--danger-soft);color:var(--red)}.distribution-install-notice ul{margin:5px 0 0;padding-left:18px}.first-run-config code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em} @media(max-width:720px){.first-run-environment,.first-run-fields{grid-template-columns:1fr}.first-run-fields label.is-wide{grid-column:auto}.first-run-config footer,.first-run-actions{align-items:stretch;flex-direction:column}.first-run-config footer .button,.first-run-actions .button{width:100%}} @media(prefers-contrast:more){.first-run-environment article,.first-run-config,.first-run-checks,.first-run-checkbox{border-width:2px}} /* MAGETICKET GUIDED INSTALLATION STORAGE IDENTITY SERVICES UX1 — 0.33.71 */ .first-run-steps li.is-complete{color:var(--green)} .first-run-steps li.is-complete span{border-color:color-mix(in srgb,var(--green) 55%,var(--line));background:var(--success-soft);color:var(--green)} .first-run-steps li span .ti{font-size:var(--icon-sm)} .first-run-storage-metrics article{min-height:96px} .first-run-service-card{display:grid;gap:16px;padding:16px;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-xs)} .first-run-services-form{padding:0;border:0;background:transparent} .first-run-services-form>section,.first-run-services-form>.first-run-service-defer{margin:0} .first-run-email-fields{display:grid;gap:14px;padding-top:14px;border-top:1px solid var(--line)} .first-run-email-fields[hidden]{display:none} .first-run-service-defer{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid var(--line);background:var(--brand-soft);border-radius:var(--r-xs)} .first-run-service-defer>.ti{color:var(--accent);font-size:var(--icon-md)} .first-run-service-defer p{margin:0;color:var(--text)} .first-run-config textarea{width:100%;min-width:0;resize:vertical;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);border-radius:var(--r-xs);padding:11px 12px;font:inherit} .first-run-config textarea:focus{outline:3px solid var(--focus);outline-offset:2px} .first-run-identity .distribution-install-panel{justify-content:flex-start} .first-run-identity .identity-step-form{max-width:none} .first-run-identity .identity-progress{margin:0} .first-run-identity fieldset{margin:0;padding:0;border:0} .first-run-identity .identity-fields input{background:var(--surface-2)} .first-run-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .first-run-review-grid>article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;padding:16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-xs)} .first-run-review-grid>article>.ti{display:grid;place-items:center;width:42px;height:42px;background:var(--brand-soft);color:var(--accent);border-radius:var(--r-xs);font-size:var(--icon-md)} .first-run-review-grid article>div{min-width:0} .first-run-review-grid span{display:block;color:var(--muted);font-size:var(--fs-sm)} .first-run-review-grid strong{display:block;margin-top:3px;font-size:var(--fs-md)} .first-run-review-grid dl{display:grid;gap:8px;margin:14px 0 0} .first-run-review-grid dl div{display:grid;gap:2px;padding-top:8px;border-top:1px solid var(--line)} .first-run-review-grid dt{font-size:var(--fs-xs);color:var(--muted)} .first-run-review-grid dd{margin:0;overflow-wrap:anywhere} .first-run-technical-id{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--fs-xs)} .first-run-warning-list{display:grid;gap:10px;padding:14px;border:1px solid color-mix(in srgb,var(--orange) 50%,var(--line));background:var(--warning-soft);border-radius:var(--r-xs)} .first-run-warning-list h3{margin:0} .first-run-warning-list ul{display:grid;gap:8px;margin:0;padding:0;list-style:none} .first-run-warning-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start} .first-run-warning-list .ti{color:var(--orange)} .first-run-finalize{border-color:var(--accent)} .first-run-finalize button[disabled]{opacity:.55;cursor:not-allowed} @media(max-width:720px){.first-run-review-grid,.first-run-environment,.first-run-fields{grid-template-columns:1fr}.first-run-fields label.is-wide{grid-column:auto}.first-run-service-card{padding:14px}.first-run-identity .identity-fields.two-columns{grid-template-columns:1fr}.first-run-identity .identity-progress{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:420px){.first-run-steps{grid-template-columns:1fr 1fr}.first-run-steps li{grid-template-columns:28px minmax(0,1fr)}.first-run-steps li span{width:28px;height:28px}.first-run-review-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.first-run-install *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}} /* MAGETICKET FIRST INSTALL UX ACCESSIBILITY TIMEZONE STATUS FIX1 — 0.33.76 */ @media (min-width:901px){ .first-run-install{height:100dvh;min-height:100dvh;grid-template-columns:minmax(270px,340px) minmax(0,1fr);overflow:hidden} .first-run-install .distribution-install-brand{justify-content:flex-start;gap:22px;padding:30px 28px;overflow:auto;overscroll-behavior:contain} .first-run-install .distribution-install-brand img{width:min(230px,100%);max-height:72px} .first-run-install .distribution-install-panel{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px clamp(24px,3vw,46px) 32px;gap:14px;scrollbar-gutter:stable} } .first-run-brand-copy{display:grid;gap:8px}.first-run-brand-copy .eyebrow,.first-run-brand-copy h1,.first-run-brand-copy p{margin:0}.first-run-brand-copy p:last-child{line-height:1.55} .first-run-install .first-run-steps{margin:4px 0 0;gap:8px}.first-run-install .first-run-steps li{grid-template-columns:28px minmax(0,1fr);gap:9px}.first-run-install .first-run-steps li span{width:28px;height:28px;font-size:var(--fs-sm)} .first-run-heading{gap:6px}.first-run-heading-line{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.first-run-heading-line>div{min-width:0}.first-run-kicker{margin:0 0 3px!important;color:var(--accent)!important;font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.first-run-heading .distribution-status{flex:0 0 auto;gap:7px;margin-top:2px;font-weight:700;background:var(--surface)} .first-run-environment{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.first-run-environment article{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:11px;min-height:86px}.first-run-environment article>.ti{width:34px;height:34px}.first-run-environment strong{font-size:var(--fs-sm);overflow-wrap:anywhere}.first-run-environment small{font-size:var(--fs-xs);line-height:1.35} .first-run-next-action{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--brand-soft);border-radius:var(--r-xs)}.first-run-next-action>.ti{display:grid;place-items:center;width:34px;height:34px;color:var(--accent);font-size:var(--icon-md)}.first-run-next-action p{margin:3px 0 0;color:var(--muted)} .first-run-checks summary{min-height:50px;padding:11px 14px}.first-run-checks-title{display:inline-flex;align-items:center;gap:8px;font-weight:800}.first-run-checks-title>.ti{color:var(--accent);font-size:var(--icon-md)}.first-run-checks-counters{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px}.first-run-checks summary .first-run-checks-counters>span{display:inline-flex;align-items:center;gap:5px;min-width:0;height:auto;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface-2);font-size:var(--fs-xs);font-weight:700}.first-run-checks-counters .is-ok{color:var(--green)}.first-run-checks-counters .is-warning{color:var(--orange)}.first-run-checks-counters .is-error{color:var(--red)} .first-run-checks .distribution-checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;background:var(--line)}.first-run-checks .distribution-checks li{min-height:62px;border:0;border-radius:0;background:var(--surface);outline:1px solid var(--line);padding:9px 11px}.first-run-checks .distribution-checks li>.ti{display:grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;font-size:14px}.first-run-checks .distribution-checks .is-ok>.ti{color:var(--green)}.first-run-checks .distribution-checks .is-warning>.ti{color:var(--orange)}.first-run-checks .distribution-checks .is-error>.ti{color:var(--red)}.first-run-checks .distribution-checks small{line-height:1.35}.first-run-checks .check-badge{padding:3px 6px;border:1px solid currentColor;border-radius:var(--r-xs);font-style:normal;font-size:var(--fs-xs);font-weight:700;white-space:nowrap}.first-run-checks .is-ok .check-badge{color:var(--green)}.first-run-checks .is-warning .check-badge{color:var(--orange)}.first-run-checks .is-error .check-badge{color:var(--red)} .first-run-config{gap:15px;padding:16px}.first-run-section-heading{gap:4px}.first-run-fields{grid-template-columns:repeat(12,minmax(0,1fr));gap:13px 14px}.first-run-field{display:grid;align-content:start;gap:7px;min-width:0}.first-run-field.is-span-3{grid-column:span 3}.first-run-field.is-span-4{grid-column:span 4}.first-run-field.is-span-6{grid-column:span 6}.first-run-field.is-span-8{grid-column:span 8}.first-run-field.is-span-12{grid-column:1/-1}.first-run-label-row{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:7px;min-width:0}.first-run-label-row>label{font-weight:750}.first-run-field input,.first-run-field select{width:100%;min-width:0;min-height:44px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);border-radius:var(--r-xs);padding:10px 12px;font:inherit}.first-run-field input:hover,.first-run-field select:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))}.first-run-field input:focus-visible,.first-run-field select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.first-run-field small{color:var(--muted);font-size:var(--fs-xs);line-height:1.4} .first-run-help{position:relative;display:inline-flex;flex:0 0 auto}.first-run-help-button{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line-strong));border-radius:50%;background:var(--brand-soft);color:var(--accent);font:800 13px/1 inherit;cursor:help}.first-run-help-button:hover{background:color-mix(in srgb,var(--brand-soft) 72%,var(--accent) 28%)}.first-run-help-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.first-run-help-tooltip{position:absolute;z-index:80;top:calc(100% + 8px);left:0;width:min(340px,calc(100vw - 48px));padding:10px 11px;border:1px solid var(--line-strong);border-radius:var(--r-xs);background:var(--surface);box-shadow:0 12px 34px rgba(3,9,20,.2);color:var(--text);font-size:var(--fs-sm);font-weight:500;line-height:1.45;opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s}.first-run-help:hover .first-run-help-tooltip,.first-run-help:focus-within .first-run-help-tooltip,.first-run-help.is-open .first-run-help-tooltip{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto} .first-run-checkbox-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px}.first-run-checkbox-wrap>.first-run-help{margin-top:10px;margin-right:9px}.first-run-checkbox{min-height:58px;margin:0;padding:11px 12px}.first-run-checkbox input{width:18px;height:18px;margin-top:2px}.first-run-checkbox strong{line-height:1.35}.first-run-checkbox small{font-size:var(--fs-xs);line-height:1.4} .first-run-form-actions{display:flex;align-items:center;justify-content:flex-start!important;gap:9px!important;flex-wrap:wrap}.first-run-form-actions .button{min-height:42px}.first-run-form-actions .button:last-child{margin-left:auto}.first-run-blocking-help{margin:0;padding:10px 12px;border-left:3px solid var(--red);background:var(--danger-soft);color:var(--text)!important} @media(max-width:1320px){.first-run-environment{grid-template-columns:repeat(2,minmax(0,1fr))}.first-run-checks .distribution-checks{grid-template-columns:1fr}.first-run-field.is-span-3{grid-column:span 6}.first-run-field.is-span-8{grid-column:span 8}.first-run-field.is-span-4{grid-column:span 4}} @media(max-width:900px){.first-run-install{height:auto;min-height:100dvh;overflow:visible}.first-run-install .distribution-install-brand{gap:16px}.first-run-install .distribution-install-brand img{width:min(220px,72vw);max-height:68px}.first-run-install .first-run-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.first-run-install .first-run-steps li{grid-template-columns:28px minmax(0,1fr)}.first-run-install .distribution-install-panel{overflow:visible}.first-run-heading-line{align-items:flex-start}.first-run-heading .distribution-status{white-space:normal}.first-run-fields{grid-template-columns:repeat(12,minmax(0,1fr))}} @media(max-width:720px){.first-run-heading-line{display:grid;gap:10px}.first-run-heading .distribution-status{justify-self:start}.first-run-environment{grid-template-columns:1fr}.first-run-checks summary{align-items:flex-start;flex-direction:column}.first-run-checks-counters{justify-content:flex-start}.first-run-field.is-span-3,.first-run-field.is-span-4,.first-run-field.is-span-6,.first-run-field.is-span-8,.first-run-field.is-span-12{grid-column:1/-1}.first-run-checkbox-wrap{grid-template-columns:minmax(0,1fr) auto}.first-run-form-actions{align-items:stretch;flex-direction:column}.first-run-form-actions .button,.first-run-form-actions .button:last-child{width:100%;margin-left:0}.first-run-help-tooltip{position:fixed;top:auto;right:16px;bottom:16px;left:16px;width:auto;max-height:45vh;overflow:auto}.first-run-help:hover .first-run-help-tooltip,.first-run-help:focus-within .first-run-help-tooltip,.first-run-help.is-open .first-run-help-tooltip{transform:none}} @media(max-width:520px){.first-run-install .first-run-steps{grid-template-columns:1fr 1fr}.first-run-install .first-run-steps li{align-items:start}.first-run-checks-counters>span{flex:1 1 auto;justify-content:center}.first-run-environment article{min-height:0}.first-run-config{padding:13px}.first-run-checkbox-wrap>.first-run-help{margin-right:5px}} @media(prefers-reduced-motion:reduce){.first-run-help-tooltip{transition:none}} @media(prefers-contrast:more){.first-run-help-button,.first-run-next-action,.first-run-checks .check-badge{border-width:2px}} .first-run-checks summary .first-run-checks-title,.first-run-checks summary .first-run-checks-counters{display:flex;place-items:initial;min-width:0;height:auto;padding:0;background:transparent;border-radius:0} @media(max-width:900px){.first-run-install .distribution-install-brand{justify-content:flex-start}} /* MAGETICKET FIRST INSTALL BUTTON CONTRAST ACCESSIBILITY FIX1 — 0.33.77 */ .first-run-install .button,.first-run-install .primary-button,.first-run-install .secondary-button{font-weight:750;text-shadow:none} .first-run-install .button:not(.primary):not(.primary-button):not(.danger):not(.danger-button), .first-run-install .secondary-button{border-color:var(--line-strong);background:var(--surface);color:var(--text)} .first-run-install .button:not(.primary):not(.primary-button):not(.danger):not(.danger-button):hover, .first-run-install .secondary-button:hover{border-color:var(--text);background:var(--surface-3);color:var(--text)} .first-run-install .button.primary, .first-run-install .primary-button{border-color:var(--brand-strong);background:var(--brand-strong);color:var(--brand-contrast);box-shadow:0 1px 0 rgb(255 255 255 / 14%) inset,0 2px 5px rgb(3 9 20 / 18%)} .first-run-install .button.primary:hover, .first-run-install .primary-button:hover{border-color:color-mix(in srgb,var(--brand-strong) 78%,#000 22%);background:color-mix(in srgb,var(--brand-strong) 82%,#000 18%);color:var(--brand-contrast)} .first-run-install .button.primary:active, .first-run-install .primary-button:active{border-color:color-mix(in srgb,var(--brand-strong) 68%,#000 32%);background:color-mix(in srgb,var(--brand-strong) 72%,#000 28%);color:var(--brand-contrast)} .first-run-install .button:focus-visible, .first-run-install .primary-button:focus-visible, .first-run-install .secondary-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 2px var(--surface)} .first-run-install .button:disabled, .first-run-install .primary-button:disabled, .first-run-install .secondary-button:disabled, .first-run-install [aria-disabled="true"].button{opacity:1;border-color:var(--line-strong);background:var(--surface-3);color:var(--muted);box-shadow:none;cursor:not-allowed} @media(prefers-contrast:more){ .first-run-install .button,.first-run-install .primary-button,.first-run-install .secondary-button{border-width:2px} .first-run-install .button.primary,.first-run-install .primary-button{background:color-mix(in srgb,var(--brand-strong) 75%,#000 25%);color:var(--brand-contrast)} } @media(forced-colors:active){ .first-run-install .button,.first-run-install .secondary-button{border-color:ButtonText;background:ButtonFace;color:ButtonText;forced-color-adjust:auto} .first-run-install .button.primary,.first-run-install .primary-button{border-color:Highlight;background:Highlight;color:HighlightText;forced-color-adjust:auto} .first-run-install .button:disabled,.first-run-install .primary-button:disabled,.first-run-install [aria-disabled="true"].button{border-color:GrayText;background:ButtonFace;color:GrayText} } /* MAGETICKET FIRST INSTALL COMPLETE JOURNEY UX ACCESSIBILITY RECETTE FINAL1 — 0.33.78 */ .distribution-status{gap:7px;font-weight:750} .distribution-status--pending{color:var(--text);border-color:color-mix(in srgb,var(--orange) 58%,var(--line-strong));background:var(--warning-soft)} .first-run-install .distribution-install-panel{scroll-padding-block:24px 92px} .first-run-install .first-run-checks summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px} .first-run-install .first-run-checks summary::-webkit-details-marker{color:var(--accent)} .first-run-metric-label{display:flex!important;align-items:center;gap:6px;min-width:0} .first-run-metric-label>.first-run-help{margin-left:auto} .first-run-metric-label .first-run-help-button{width:22px;height:22px;font-size:12px} .first-run-wizard-errors{padding:11px 13px;border:1px solid var(--red);border-left-width:4px;background:var(--danger-soft);color:var(--text);font-weight:700} .first-run-wizard-errors[hidden]{display:none} .first-run-install [aria-invalid="true"]{border-color:var(--red)!important;box-shadow:0 0 0 1px var(--red)} .first-run-install [aria-invalid="true"]:focus-visible{outline-color:var(--red)} .first-run-password-control{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;min-width:0} .first-run-password-control>input{grid-column:1/-1;padding-right:50px!important} .first-run-password-toggle{position:absolute;top:1px;right:1px;bottom:1px;display:grid;place-items:center;width:42px;padding:0;border:0;border-left:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer} .first-run-password-toggle:hover{background:var(--surface-3)} .first-run-password-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px;z-index:2} .first-run-password-feedback{display:block;min-height:1.35em} .first-run-password-feedback.is-valid{color:var(--green)!important;font-weight:700} .first-run-password-feedback.is-invalid{color:var(--red)!important;font-weight:700} .first-run-identity .identity-step-form{gap:16px} .first-run-identity .identity-progress{margin:0} .first-run-identity .identity-fields .first-run-field{display:grid;align-content:start;gap:7px;min-width:0} .first-run-identity .identity-fields .first-run-label-row label{font-size:var(--fs-sm);font-weight:750;color:var(--text)} .first-run-identity .identity-fields .first-run-field>small{color:var(--muted);font-size:var(--fs-xs);line-height:1.4} .first-run-identity .identity-step-actions{margin-top:2px;padding:14px 0 0;position:sticky;bottom:0;z-index:20;background:linear-gradient(to bottom,transparent 0,var(--surface) 18px);border-top:1px solid var(--line)} .first-run-identity .identity-step-status{font-weight:700;color:var(--text)} .first-run-identity .identity-review{min-height:0} .first-run-identity .identity-review-group{background:var(--surface)} .first-run-identity .identity-review-group>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)} .first-run-identity .identity-review-group>header h3{margin:0;font-size:var(--fs-sm)} .first-run-identity .identity-review-group .text-action{min-height:34px;padding:5px 8px} .first-run-email-state{margin:0!important;padding:8px 10px;border-left:3px solid var(--accent);background:var(--brand-soft);color:var(--text)!important;font-size:var(--fs-sm);font-weight:650} .first-run-email-fields[aria-busy="true"]{opacity:.72} .first-run-install form[aria-busy="true"]{cursor:progress} .first-run-install form[aria-busy="true"] .button[type="submit"]{cursor:progress} .first-run-install .button .first-run-submit-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:first-run-spin .7s linear infinite} @keyframes first-run-spin{to{transform:rotate(360deg)}} .first-run-finalize .first-run-blocking-help{margin:0} @media(max-width:900px){.first-run-identity .identity-step-actions{position:static;background:transparent}.first-run-install .distribution-install-panel{scroll-padding-block:16px}} @media(max-width:680px){.first-run-identity .identity-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px}.first-run-identity .identity-progress li{white-space:normal}.first-run-identity .identity-step-actions{grid-template-columns:1fr}.first-run-identity .identity-step-actions .identity-step-status{order:-1;text-align:left}.first-run-identity .identity-step-actions .button{width:100%}.first-run-metric-label>.first-run-help{margin-left:4px}} @media(prefers-reduced-motion:reduce){.first-run-install .button .first-run-submit-spinner{animation:none;border-right-color:currentColor}} @media(forced-colors:active){.distribution-status--pending{border-color:CanvasText;background:Canvas;color:CanvasText}.first-run-wizard-errors{border-color:CanvasText;background:Canvas;color:CanvasText}.first-run-password-toggle{border-left-color:ButtonText;background:ButtonFace;color:ButtonText}}