/**
 * Multi-step workflow creation wizard (Milestone H)
 */

.wf-shell {
  width: min(100% - 2rem, 1080px);
  margin: 28px auto 72px;
}
.wf-shell__intro {
  margin-bottom: 20px;
}
.wf-shell__intro h1 {
  font-family: var(--jv-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -0.018em;
  margin: 0 0 8px;
}
.wf-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 22px 0 18px;
}
.wf-progress__step {
  position: relative;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--jv-line);
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--jv-muted);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.wf-progress__step.is-active {
  color: var(--jv-teal-deep);
  border-color: rgba(14, 143, 139, 0.45);
  background: var(--jv-teal-soft);
}
.wf-progress__step.is-done {
  color: var(--jv-ok);
  border-color: rgba(27, 122, 74, 0.35);
}
.wf-progress__n {
  display: block;
  font-family: var(--jv-display);
  font-size: 1.05rem;
  margin-bottom: 2px;
}
@media (max-width: 700px) {
  .wf-progress { grid-template-columns: repeat(2, 1fr); }
}

.wf-layout {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .wf-layout { grid-template-columns: 1fr; }
}

.wf-panel {
  background: var(--jv-surface-solid);
  border: 1px solid var(--jv-line);
  border-radius: calc(var(--jv-radius) + 2px);
  box-shadow: var(--jv-shadow-sm);
  padding: 22px;
}
.wf-panel h2 {
  font-family: var(--jv-display);
  font-size: 1.25rem;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.wf-step { display: none; }
.wf-step.is-active {
  display: block;
  animation: wfIn 0.35s ease both;
}
@keyframes wfIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.wf-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .wf-grid { grid-template-columns: 1fr; }
}
.wf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--jv-line);
}
.wf-actions__right { display: flex; flex-wrap: wrap; gap: 10px; }
.wf-autosave {
  font-size: 0.85rem;
  color: var(--jv-muted);
  min-height: 1.2em;
}
.wf-autosave.is-saved { color: var(--jv-ok); }

.wf-preview {
  position: sticky;
  top: calc(var(--jv-header-h) + 16px);
}
.wf-preview__swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--jv-line);
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.wf-preview__title {
  font-family: var(--jv-display);
  font-size: 1.35rem;
  margin: 10px 0 4px;
  letter-spacing: -0.012em;
}
.wf-preview__meta { color: var(--jv-muted); font-size: 0.92rem; }
.wf-preview__block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--jv-line);
}


/* Consistent workflow controls: inputs without an explicit type previously
   missed the shared form rule and rendered as short square browser defaults. */
#wf-form .jv-field input:not([type]),
#wf-form .jv-field input[type='text'],
#wf-form .jv-field input[type='email'],
#wf-form .jv-field input[type='url'],
#wf-form .jv-field input[type='number'],
#wf-form .jv-field input[type='password'],
#wf-form .jv-field select {
  display: block;
  width: 100%;
  min-height: 52px;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--jv-line-strong);
  border-radius: 14px;
  background-color: #fff;
  color: var(--jv-ink);
  font: inherit;
  line-height: 1.2;
  box-sizing: border-box;
}
#wf-form .jv-field select {
  padding-right: 44px;
  cursor: pointer;
}
#wf-form .jv-field textarea {
  width: 100%;
  min-height: 132px;
  padding: 14px 16px;
  border: 1px solid var(--jv-line-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--jv-ink);
  font: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
#wf-form .jv-field input:focus,
#wf-form .jv-field select:focus,
#wf-form .jv-field textarea:focus {
  outline: none;
  border-color: var(--jv-teal);
  box-shadow: var(--jv-focus);
}
.wf-looks-good{align-self:center;color:var(--jv-muted);font-weight:700}.wf-color-control{display:grid;grid-template-columns:64px 1fr;gap:10px}.wf-color-control input[type=color]{padding:5px!important}.wf-color-presets{display:flex;gap:9px;margin-top:10px}.wf-color-presets button{width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--jv-line-strong);background:var(--preset);cursor:pointer}.wf-color-presets button:hover,.wf-color-presets button.is-active{box-shadow:0 0 0 3px rgba(14,143,139,.25)}.wf-import-note{margin:14px 0}.wf-location-disabled{opacity:.55}.wf-logo-preview{max-width:150px;max-height:56px;object-fit:contain;margin:8px 0}.wf-url-preview{font-weight:800;color:var(--jv-teal-deep)}


/* Workflow branding and selection refinements */
.wf-file-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.wf-file-control input[type=file]{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
.wf-file-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--jv-line-strong);border-radius:12px;background:#fff;color:var(--jv-ink);font-weight:750;cursor:pointer;box-shadow:0 5px 15px rgba(14,36,51,.05)}
.wf-file-button:hover{border-color:var(--jv-teal);color:var(--jv-teal-deep)}
.wf-file-name{color:var(--jv-muted);font-size:.92rem}
.wf-preview__brandmark{display:flex;align-items:center;min-height:48px;margin-bottom:10px}
.wf-preview__brandmark .wf-preview__swatch{margin:0}
.wf-logo-preview{display:block;max-width:180px;max-height:72px;width:auto;height:auto;object-fit:contain;margin:0;background:#fff;border:1px solid var(--jv-line);border-radius:12px;padding:7px}